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

Question

我尝试使用 vue.js 创建一个调查，这很棒。在每个部分中，用户都可以通过单击 div.box 来 select 一个答案。单击事件后我希望事情发生：

将点击框的 data-value="" 分配到我的应用程序的 data: 层作为 selected answer
通过添加 .choosen 来标记单击的 div.box，同时应删除同一部分中所有其他框的相同 class。

我的 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') selector 并将 .parent() 与 removeClass() 和 addClass() 一起使用。我怎样才能在 vuejs 中实现相同的功能？

JS FIDDLE DEMO

Answer 1

您需要向元素添加点击处理程序和条件 class 绑定。例如：

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

关于绑定的文档 class 在这里：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax 事件处理在这里：https://vuejs.org/v2/guide/events.html

Answer 2

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

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

Build vue.js survey with click highlighting

javascript

vue.js

vue-component