vue.jsアンケートをクリックして作成する

Question

vue.jsを使用してアンケートを作成しようとしています。各セクションで、ユーザーはdiv.boxをクリックして回答を選択できます。クリックイベントの後、私は発生するものにしたい：、クリックボックスの

1. 割り当てdata-value=""を私のアプリのdata:層に選択した答えに

2. マークをクリックdiv.boxを.choosenを追加することにより、同じクラスながら、同じセクションの他のすべてのボックスから削除する必要があります。

私はこのように私のHTMLマークアップを得た：私は単に$('.box')セレクタを作成し、removeClass()とaddClass()で.parent()を使用することができますjQueryので

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

。どのように私は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>