Javascript Vue.js-每个组只单击一个按钮以生成动态按钮

我在一个网站上有五个问题，每个问题有四个答案。每个问题只能单击一个按钮

我该怎么做

newvue({
el:“#应用程序”，
数据：{
答复：{}，
当前问题:{
示例：{
答：“缺乏计算机使用方面的知识”，
B:“蒙塔吉韦尔克泽格电力公司”，
C:‘CPU的硅晶片’，
D:‘Schrauben zum Befestigen von Bauteilen’，
E:“Zugekaufte Computergehäuse aus Stahlblech”
},
答复:{
“1”：“Rohstoff”，
“2”：“Fremdbauteil”，
“3”：“希尔夫斯托夫”，
“4”：“Betriebstoff”
},
权利：{
A:3，
B:4，
C:1，
D:3，
E:2
}
}
},
方法：{
选择无应答按钮（索引）{
from（this.answers）.forEach（answer=>（answer.active=false））；
让答案=这个。答案[索引]；
answer.active=！answer.active；
this.$set（this.answers，index，answer）；
}
}
});

{{example}

{{答案}

问题是你的答案是一个字符串，但你把它当作一个对象。正在尝试向其添加将不起作用的
active
属性

另一个问题是，如果修改
答案
，它将影响所有问题，而不仅仅是一个问题。因为它们都共享同一个数组

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

注意：
@click
是
v-on:click
的缩写，
:class
是
v-bind:class

选项1:
newvue({
el:“#应用程序”，
数据：{
答复：{}，
当前问题:{
示例：{
A:{
问题：“缺乏计算机使用方面的知识”，
pickedAnswer:null
},
B:{
问题：“蒙塔格韦尔克泽格电力公司”，
pickedAnswer:null
},
C:{
问题：'Silizium zur Herstellung der CPU'，
pickedAnswer:null
},
D:{
问题：“Schrauben zum Befestigen von Bauteilen”，
pickedAnswer:null
},
E:{
问题：“Zugekaufte Computergehäuse aus Stahlblech”，
pickedAnswer:null
}
},
答复:{
“1”：“Rohstoff”，
“2”：“Fremdbauteil”，
“3”：“希尔夫斯托夫”，
“4”：“Betriebstoff”
},
权利：{
A:3，
B:4，
C:1，
D:3，
E:2
}
}
}
});

{{example.question}

{{答案}

你能把你的代码片段改写成一个工作文件吗？i、 没有导出？我重写了它并尝试了它。我为您添加了它；）我再次更改了代码，但不知道如何修复下一个错误好的，但是我如何才能更改它使其工作？我在我的帖子中添加了JavaScript中的示例代码。你能看看吗？也许您可以在Vue.js中转换它而不更改数据？如果不可能，那么我必须更改我的数据…@Snowappix您在代码中使用jQuery进行DOM操作。这在Vue中不起作用。如果你不想修改你的数据，你可以添加一个新的属性，该属性将包含用户选择的内容，而不是保留在问题中。你能给我举个例子说明你的意思吗？Sry，但我是Vue.js的新手。。。