通過單擊突出顯示構建vue.js調查

Question

我嘗試使用vue.js創建調查，這非常棒。在每個部分中，用戶可以通過單擊div.box來選擇答案。 click事件之後，我想的事情發生：

1. 點擊對話框的分配data-value=""到data:層我的應用程序所選擇的答案

2. 標記點擊div.box加入.choosen，而同一類應該刪除同一部分中的所有其他框。

我得到了我的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中實現相同？

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

您需要點擊處理程序添加到您的元素，並有條件類綁定。例如：在綁定類在這裏

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

文檔：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax 和事件處理在這裏：https://vuejs.org/v2/guide/events.html

Answer 3

使用組件

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>