VueJS在方法函数中设置数据

Question

这是我的代码,HTML:

<div id="myApp">
   <div class="items">
      <div class="item" v-for="quiz in quizzes" :key="quiz.id"}
         <span>{{ quiz.question }}</span>
         <span v-if="selected[quiz.key]">{{ quiz.answer }}</span>
         <a href: "#" v-on:click="quizSelect(quiz.key, $event)">Select</a>
      </div>
   </div>
</div>

JS代码:

new Vue({
   el: '#myApp'
   data: {
      selected: {},
      quizzes: [
         {
            key: 'k1',
            question: 'This is question 1',
            answer: 'This is answer 1'
         },
         {
            key: 'k2',
            question: 'This is question 2',
            answer: 'This is answer 2'
         }
      ]
   },
   methods: {
      quizSelect: function(key, e) {
         e.preventDefault();
         this.selected[key] = 'selected';
      }
   }
})

我想点击"选择",测验anwser将显示.但是当我点击"选择"时,没有任何事情发生.怎么了？有人可以帮帮我吗???

Answer 1

换行:

this.selected[key] = 'selected';

至:

this.$set(this.selected, key, 'selected');

请参阅深度的vue反应性.

new Vue({
   el: '#myApp',
   data: {
      selected: {},
      quizzes: [
         {
            key: 'k1',
            question: 'This is question 1',
            answer: 'This is answer 1'
         },
         {
            key: 'k2',
            question: 'This is question 2',
            answer: 'This is answer 2'
         }
      ]
   },
   methods: {
      quizSelect: function(key, e) {
         e.preventDefault();
         this.$set(this.selected, key, 'selected');
         // this.selected[key] = 'selected';
      }
   }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="myApp">
   <div class="items">
      <div class="item" v-for="quiz in quizzes" :key="quiz.id">
         <span>{{ quiz.question }}</span>
         <span v-if="selected[quiz.key]">{{ quiz.answer }}</span>
         <a href="#" v-on:click="quizSelect(quiz.key, $event)">Select</a>
      </div>
   </div>
</div>