视图未在Vue 2中更新(在组件中的对象属性上使用Vue.set)

时间:2018-10-08 08:45:43

标签: vue.js vue-reactivity

我知道我必须使用Vue.set(object,property,value)来确保Vue的反应性,但是以下代码无法正常工作。

组件:

Vue.component('answer-block', {
  props: ['letters'],
  template: `
    <div>
  <div id='keyboard' v-if="mode==='type'">
  <div :key='idx' :style='letterStyle(letter)' :class='letterClass(letter)' v-for='(letter,idx) in letters' @click='setLetter(letter,"click")'>{{letter.letter}}</div>
  </div>
    </div>
    `

组件方法“ setLetter”:

Vue.set(selected,'correct',true);

组件方法“ letterClass”:

return {
  "key": true,
  "correct": letter.correct === true
 };

问题:当字母属性“正确”设置为“真”时,类“正确”未应用于div 部分解决方案:使用“ this。$ forceUpdate();”时查看更新但并非没有调用此函数

在上述情况下,如何在不调用forceUpdate的情况下获得视图更新?

非常感谢。

0 个答案:

没有答案