VueJs 反应性答案

【问题标题】：VueJs ReactivityVueJs 反应性
【发布时间】：2020-01-31 23:00:11
【问题描述】：

我有一个如下所示的 vueJs 组件：

export default {
  name: 'componentname',
  data () {
    return {
      items: []
    }
  },
  mounted() {
    this.getItems();
  },
  methods: {
    getItems() {
      this.$http.get('HTTP_API_ADDRESS').then(res => {
        this.items = res.data;
      })
    }
  }
}

我在我的模板中使用了一个 v-for 循环，用于在调用我的 API 之后出现的 items 数组中的项目。

我有一个问题，数组中的对象包含一个布尔值，我试图通过单击在页面上更新它，但该对象似乎不会在页面上更新，除非在实例中明确定义的内容是更新了。

示例，纯粹是示例 - 代码不合逻辑。

<ul>
  <li v-for="item in items" @click="item.available = !item.available">{{ item.name }} | {{ item.available }}</li>
</ul>

这个想法是根据对项目的点击，available 会显示 true 或 false。

我相信它与未在安装时定义的对象的元素有关，但是我不确定如果它们在数组中我将如何做到这一点？

【问题讨论】：

我认为它不会起作用。我已经检查了一个演示，你的代码工作正常。请再一次

标签： javascript arrays vue.js javascript-objects

【解决方案1】：

您可以在对象变为反应之前预先填充available：

this.$http.get('HTTP_API_ADDRESS').then(res => {
  const items = res.data;

  for (const item of items) {
    item.available = false;
  }

  // The array and its objects are made reactive on the next line
  this.items = items;
})

您也可以稍后使用$set 添加新属性：

@click="$set(item, 'available', !item.available)"

【讨论】：

【解决方案2】：

vue (2.0) 反应性系统的工作方式是使用Object.defineProperty，因为它的工作方式仅适用于原始值的嵌套属性。有办法解决这个问题，最简单的方法是将该属性设置为布尔值，如下所示：

computed: {
     booleanValue(){
        return this.myObject.someValue
    }
}

此代码现在将是反应式的。另一种解决方案是按照建议使用$set。此外，您可以考虑使用 vue 反应式内部 api，请参阅 here 和 here

【讨论】：