Javascript 使用单击高亮显示构建vue.js调查

我尝试使用vue.js创建一个调查，这很好。在每个部分中，用户都可以通过单击

div.box

来选择答案。单击事件后，我希望发生以下事情：

将单击框的

data value=”“

指定给我的应用程序的

数据：

层作为所选答案

通过添加

.choosen

，标记单击的

div.box

，同时应删除同一节中所有其他框的同一类

我的HTML标记如下所示：

<div class="wrapper">
  <div class="box-holder">
    <div class="box" data-value="lorem">Dogs</div>
  </div>
  <div class="box-holder">
    <div class="box" data-value="aperiam">Birds</div>
  </div> 
  ... and some more ...
</div>

狗
鸟
... 还有一些。。。

在jQuery中，我可以简单地创建一个

$（'.box'）

选择器，并将

.parent（）

与

removeClass（）和
addClass（）一起使用。如何在vuejs中实现同样的效果

您需要向元素添加一个单击处理程序和一个条件类绑定。例如：

<div class="box" data-value="lorem" 
  v-on:click="favoritePet = 'dogs' "
  v-bind:class="{ choosen: favoritePet == 'dogs' }"
>Dogs</div>

狗

这里有关于绑定类的文档：
和这里的事件处理：

newvue({
el:“包装器”，
数据：{
名单：[
{
id:“lorem”，
文字：“狗”
},
{
id:“aperiam”，
文字：“鸟”
},
{
id:'aperiam2'，
文字：“Birds2”
},
{
id:'aperiam3'，
文字：“Birds3”
}
],
choosen:“lorem”
},
方法：{
onClick：函数（id）{
this.choosen=id；
}
}
})
.choosen{
颜色：红色
}

{{item.text}
使用组件


Vue.component（'question'{
模板：“#问题”，
数据：函数（）{
返回{
choosen：未定义
}
},
道具：[“数据”]，
方法：{
onClick：函数（choosen）{
this.choosen=choosen；
this.$emit（'set-question'，this.choosen，this.data.id）
}
}
})
新Vue({
el:“应用程序”，
数据：{
问题{}，
问题1：{
id:“问题1”，
名单：[
{
id:“lorem”，
文字：“狗”
},
{
id:“aperiam”，
文字：“鸟”
},
{
id:'aperiam2'，
文字：“Birds2”
},
{
id:'aperiam3'，
文字：“Birds3”
}
],
标题：“你最喜欢的宠物？”
},
问题2：{
id:“问题2”，
名单：[
{
id:“lorem”，
文字：“狗”
},
{
id:“aperiam”，
文字：“鸟”
},
{
id:'aperiam2'，
文字：“Birds2”
},
{
id:'aperiam3'，
文字：“Birds3”
}
],
标题：“你最喜欢的运动？”
}
},
方法：{
设置问题：函数（choosen，id）{
this.question[id]=choosen；
console.log（这个问题）；
}
}
})
.choosen{
颜色：红色
}
#应用程序{
垫底：200px；
}

{{data.title}
{{item.text}
是否有一种不必编辑每个框的解决方案？就像创建一个组件并传递改变的参数一样？是的，您可以基于您的box元素创建一个组件，并将其和动物类型作为Prophery Mixa传递给它，感谢这个伟大且无代码的建议。有没有办法将多个部分分开，例如最喜欢的宠物和最喜欢的运动，这样就不会相互影响？使用我添加的组件作为示例