Vue.js - 每组仅单击一个按钮以生成动态按钮 [英] Vue.js - Click only one button per group for dynamic button generation

问题描述

我在一个网站上有五个问题，每个问题有 4 个答案.每个问题只能点击一个按钮.

我该怎么做?

new Vue({el: '#app',数据: {答案:{}、当前问题:{例子: {A: 'Lack zum Lackieren der Computergehäuse',B:'Elektrische Energie für die Montagewerkzeuge'，C: 'Silizium zur Herstellung der CPU',D: 'Schrauben zum Befestigen von Bauteilen',E: 'Zugekaufte Computergehäuse aus Stahlblech'},答案:{'1': '罗斯托夫','2': 'Fremdbauteil','3': '希尔夫斯托夫','4': 'Betriebsstoff'},权利:{答:3，乙:4，丙:1，D: 3,电子:2}}},方法: {selectedOneAnswerButton(索引){Array.from(this.answers).forEach(answer => (answer.active = false));让答案 = this.answers[index];answer.active = !answer.active;this.$set(this.answers, index, answer);}}});

<script src="https://cdn.jsdelivr.net/npm/vue"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><div id="应用程序">
</p>

有效

这在我第一次需要它时有效，但第二次我问了一个有 4 个答案的简单问题时就没有用了……当然在目前的情况下，有四个问题和四个可能的答案.

这是我如何在不更改数据的情况下管理它的 JavaScript 示例.

var currentQuestion = {例子: {"A": "计算机设备缺乏","B": "Elektrische Energie für die Montagewerkzeuge","C": "Silizium zur Herstellung der CPU","D": "Schrauben zum Befestigen von Bauteilen",E":Zugekaufte Computergehäuse aus Stahlblech"},答案:{"1": "罗赫斯托夫","2": "Fremdbautei","3": "希尔夫斯托夫",4":Betriebsstoff"},权利:{A":3，乙":4，C":1，D":3，E":2}};功能选择答案(ID){$(id).addClass("btn-primary");$(id).removeClass("btn-secondary");}功能取消选择答案(ID){$(id).addClass("btn-secondary");$(id).removeClass("btn-primary");}var root = document.getElementById("容器");var mutlipleequestionscreen = document.createElement("div");buildMultipleQuestionScreen();//布局函数 buildMultipleQuestionScreen() {console.log("buildMultipleQuestionScreen");mutlipleequestionscreen.id = "multiple-question-screen";mutlipleequestionscreen.className = "超大屏幕问题";root.appendChild(mutlipleequestionscreen);var div = document.createElement("div");div.id = "多题";var h2 = document.createElement("h2");h2.textContent = "片段";var span = document.createElement("span");span.className = "多题号";span.textContent = currentQuestion.id;var div2 = document.createElement("div");div2.className = "情况 p-3 mb-2 bg-info text-white";var p = document.createElement("p");p.className = "多问题情况";p.textContent = currentQuestion.situation;var p2 = document.createElement("p");p2.className = "多问题描述";p2.textContent = currentQuestion.description;var p3 = document.createElement("p");p3.className = "多问题文本";p3.textContent = currentQuestion.question;var p4 = document.createElement("p");p4.className = "多题练习";p4.textContent = currentQuestion.exercise;var p5 = document.createElement("p");p5.className = "多问题说明";p5.textContent = currentQuestion.note;mutlipleequestionscreen.appendChild(div);div.appendChild(h2);h2.append(span);div.appendChild(div2);div2.appendChild(p);div.appendChild(p2);div.appendChild(p3);div.appendChild(p4);div.appendChild(p5);var 字母 = "";for(var i = 0; i < Object.keys(currentQuestion.examples).length; i++){var row = document.createElement("div");row.className = "row";var div3 = document.createElement("div");div3.className = "col-md-12";var p6 = document.createElement("p");p6.className = "p-3 mb-2 bg-dark text-white";p6.textContent = Object.keys(currentQuestion.examples)[i] + " : ";var span2 = document.createElement("span");letter = Object.keys(currentQuestion.examples)[i];span2.id = "multiple-question-example-" + letter.toLowerCase();span2.textContent = currentQuestion.examples[Object.keys(currentQuestion.examples)[i]];div.appendChild(row);row.appendChild(div3);div3.appendChild(p6);p6.appendChild(span2);var row2 = document.createElement("div");row2.className = "row";for(var j = 1; j <= Object.keys(currentQuestion.answers).length; j++){如果(j % 2 != 0){div.appendChild(row2);}var div4 = document.createElement("div");div4.className = "col-md-6";var p7 = document.createElement("p");var button = document.createElement("button");button.id = "multiple-question-answer-" + letter.toLowerCase() + "-" + j + "-btn"button.className = "answer answer-btn answer-" + letter.toLowerCase() + "-btn answer-" + j + "-btn btn btn-secondary btn-lg btn-block";var span3 = document.createElement("span");span3.className = "multiple-question-answer-" + j;span3.textContent = Object.keys(currentQuestion.answers)[j - 1] + ":" + currentQuestion.answers[j];button.addEventListener("点击", function() {选择答案(这个)；var letterTmp = this.id.split('-')[3];$(".answer-" + letterTmp + "-btn").not(this).each(function() {取消选择答案(这个)；});控制台日志(this.id)；});row2.appendChild(div4);div4.appendChild(p7);p7.appendChild(button);button.appendChild(span3);}}var row3 = document.createElement("div");row3.className = "row";var div5 = document.createElement("div");div5.className ="col-md-10";var div6 = document.createElement("div");div6.className = "col-md-2";var p8 = document.createElement("p");var button2 = document.createElement("button");button2.id = "多问题-答案-提交-btn";button2.className = "answer-commit-btn btn btn-primary btn-lg btn-block";var span4 = document.createElement("span");span4.className = "multiple-question-commit-text";span4.textContent = "反抗";//多问题反按钮button2.addEventListener("点击", function() {//在 DEN GLOBALEN 爱因斯坦//.answer-commit-btnanswerCommitButton();});var p9 = document.createElement("p");var button3 = document.createElement("button");button3.id ="多问题-继续-btn";button3.className = "continue-btn btn btn-primary btn-lg btn-block";button3.style = "显示:无;";var span5 = document.createElement("span");span5.textContent = "Weiter";//多问题按钮button3.addEventListener("点击", function() {var node = document.getElementById("容器");var child = document.getElementById("multiple-question-screen");var child2 = document.getElementById("multiple-questions");node.removeChild(child);child.removeChild(child2);//在 DEN GLOBALEN 爱因斯坦继续按钮()；});div.appendChild(row3);row3.appendChild(div5);row3.appendChild(div6);div6.appendChild(p8);p8.appendChild(button2);button2.appendChild(span4);div6.appendChild(p9);p9.appendChild(button3);button3.appendChild(span5);}

<头><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><!-- 引导程序--><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><身体><div id="容器">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="example.js"></script></html>

是否可以在 VUE.JS 中执行此操作而不更改我的数据?

解决方案

问题是你的答案是一个字符串，但你把它当作一个对象来对待.尝试向其中添加 active 属性，但这是行不通的.

另一个问题是，如果您修改answers，它会影响所有问题，而不仅仅是一个问题.因为它们都共享同一个数组.

相反，我会修改您的 examples 对象，以包含对象而不是字符串.该对象将包含用户选择的问题和答案.这样你就会对每个问题都有一个特定的答案，用户只能选择一个，因为它会覆盖旧值.

注意: @click 是 v-on:click 和 :class 的简写 是 v-bind:class

的简写

选项 1:

new Vue({el: '#app',数据: {答案:{}、当前问题:{例子: {一种:  {问题:缺乏计算机资源"，选择答案:空},乙:{问题:'Elektrische Energie für die Montagewerkzeuge'，选择答案:空},C:  {问题:'Silizium zur Herstellung der CPU'，选择答案:空},D:{问题:'Schrauben zum Befestigen von Bauteilen'，选择答案:空},乙:{问题:'Zugekaufte Computergehäuse aus Stahlblech'，选择答案:空}},答案:{'1': '罗斯托夫','2': 'Fremdbauteil','3': '希尔夫斯托夫','4': 'Betriebsstoff'},权利:{答:3，乙:4，丙:1，D: 3,电子:2}}}});

<script src="https://cdn.jsdelivr.net/npm/vue"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><div id="应用程序">
</p>