使用點擊突出顯示構建 vue.js 調查

Question

我嘗試使用vue.js創建一個調查，這很棒。 在每個部分中，用戶都可以通過單擊div.box來選擇答案。 在點擊事件之后，我希望事情發生：

1. 將單擊框的data-value=""分配給data:我的應用程序層作為選定答案

2. 通過添加.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 中實現相同的功能？

JS 小提琴演示

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 ://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax 和事件處理： https ://v2.vuejs.org/v2/guide/事件.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>