通过单击突出显示构建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>