[英]Build vue.js survey with click highlighting
我尝试使用vue.js创建一个调查,这很棒。 在每个部分中,用户都可以通过单击div.box
来选择答案。 在点击事件之后,我希望事情发生:
将单击框的data-value=""
分配给data:
我的应用程序层作为选定答案
通过添加.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( removeClass()
和addClass()
一起使用。 如何在 vuejs 中实现相同的功能?
new Vue({ el: ".wrapper", data: { list: [ { id: 'lorem', text: 'Dogs' }, { id: 'aperiam', text: 'Birds' }, { id: 'aperiam2', text: 'Birds2' }, { id: 'aperiam3', text: 'Birds3' } ], choosen: 'lorem' }, methods: { onClick: function(id) { this.choosen = id; } } })
.choosen{ color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> <div class="wrapper"> <div class="box-holder" v-for="item in list" :class="{ 'choosen': choosen === item.id }" > <div class="box" @click="onClick(item.id)">{{ item.text }}</div> </div> </div>
使用组件
Vue.component('question', { template: '#question', data: function() { return { choosen: undefined } }, props: ['data'], methods: { onClick: function(choosen) { this.choosen = choosen; this.$emit('set-question', this.choosen, this.data.id) } } }) new Vue({ el: "#app", data: { question: {}, question1: { id: 'question1', list: [ { id: 'lorem', text: 'Dogs' }, { id: 'aperiam', text: 'Birds' }, { id: 'aperiam2', text: 'Birds2' }, { id: 'aperiam3', text: 'Birds3' } ], title: 'Your favorite pet?' }, question2: { id: 'question2', list: [ { id: 'lorem', text: 'Dogs' }, { id: 'aperiam', text: 'Birds' }, { id: 'aperiam2', text: 'Birds2' }, { id: 'aperiam3', text: 'Birds3' } ], title: 'Your favorite sport?' } }, methods: { setQuestion: function(choosen, id) { this.question[id] = choosen; console.log(this.question); } } })
.choosen{ color: red } #app{ padding-bottom: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> <div id="app"> <question :data="question1" @set-question="setQuestion"></question> <question :data="question2" @set-question="setQuestion"></question> </div> <template id="question"> <div> <h1>{{data.title}}</h1> <div class="wrapper"> <div class="box-holder" v-for="item in data.list" :class="{ 'choosen': choosen === item.id }" > <div class="box" @click="onClick(item.id)">{{ item.text }}</div> </div> </div> </div> </template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.