为什么这个组件的计算属性不是反应性的：

Question

我有一个这样的对象：

  myObject: {
    items: [{
      title: '140',
      isActive: true,
    }, {
      title: '7',
      isActive: false
    }, {
      title: '10',
      isActive: false
    }]
  }

我是这样使用的：

<my-component :items="myObject.items"></my-component>

这是组件的样子：

<template>
  <div class="i-panel panel-container d-flex"
    <div
      v-for="item in prefs.items"
      class="panel-item"
      @click="onClick(item)">
      <!-- some content -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'IPanel',
  props: {
    items: {
      type: Array,
      default () {
        return []
      }
    }
  },

  computed: {
    // code
    prefs () {
      return {
        items: this.items
      }
    }
  },

  methods: {
    onClick (item) {
      this.prefs.items.forEach(item => {
        if (JSON.stringify(item) === JSON.stringify(clickedItem)) {
          item.isActive = true
        }
      })
    }
  }
}
</script>

当我单击一个项目时（并且 item 与 clickedItem 相同），它应该变为 isActive true。确实如此。但我必须刷新 Vue devtools 或重新渲染页面才能使更改生效。

为什么item.isActive = true 没有反应性？

Answer 1

在您发布的代码中，您使用的是未在任何地方定义的 clickedItem 对象。我不知道这只是在写你的问题还是你的问题。

但是，当以正确的方式使用clickedItem 时，它似乎可以工作：https://jsfiddle.net/d5z93ygy/4/

HTML

<div id="app" class="i-panel panel-container d-flex">
    <div
      v-for="item in prefs.items"
      class="panel-item"
      @click="onClick(item)">
      <!-- some content -->{{ item.isActive ? 'active' : 'inactive' }}
    </div>
</div>

JS

new Vue({
    el: "#app",
  data: {
    items: [{
      title: '140',
      isActive: true,
    }, {
      title: '7',
      isActive: false
    }, {
      title: '10',
      isActive: false
    }]
  },
  computed: {
    // code
    prefs () {
      return {
        items: this.items
      }
    }
  },
  methods: {
    onClick (clickedItem) {
      this.prefs.items.forEach(item => {
        if (JSON.stringify(item) === JSON.stringify(clickedItem)) {
          item.isActive = true
        }
      })
    }
  }
})

Answer 2

改变

<div
  v-for="item in prefs.items"
  class="panel-item"
  @click="onClick(item)">
  <!-- some content -->
</div>

到

<div
  v-for="(item, index) in prefs.items"
  class="panel-item"
  @click="onClick(index)">
  <!-- some content -->
</div>

然后，在您的更改方法中，如下所示：

onClick (index) {
  Vue.set(this.items, index, true);
}

https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats