Question

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

将已点击框的data-value=""分配到我应用的data:图层作为选定答案
通过添加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

＆＃13;

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;
    }
  }
})

＆＃13;

.choosen{
  color: red
}

＆＃13;

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

＆＃13;

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>

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

3 个答案: