使用点击突出显示构建 vue.js 调查

Question

I try to create a survey using vue.js , which is great. In each section the user is able to select an answer by clicking the div.box . After a click event I want to things to happen:

1. Assign data-value="" of clicked box to the data: layer of my app as selected answer

2. Mark the clicked div.box by adding .choosen , while the same class should be removed of all other boxes in the same section.

I got my HTML markup like this:

<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>

In jQuery I could simply create a $('.box') selector and use .parent() with removeClass() and addClass() . How can I achieve the same in vuejs?

JS FIDDLE DEMO

Answer 1

 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>

Answer 2

You need to add a click handler to your element, and a conditional class binding. For example:

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

Docs on binding classes here : https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax And event handling here : https://v2.vuejs.org/v2/guide/events.html

Answer 3

Use component

 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>