Question

我有一个类似于以下内容的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>

其想法是，可用项将显示对还是错，具体取决于对项目的单击。

我相信这与未在安装中定义的对象的元素有关，但是我不确定如果它们在数组中该怎么做？

Answer 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)"

相关文档为https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats。

Answer 2

vue（2.0）反应性系统的工作方式与Object.defineProperty一起使用，因为它的工作方式仅在原始值上不适用于嵌套属性。有一些方法可以解决此问题，最简单的方法是使该属性成为您的布尔值，就像这样计算得出的值：

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

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

VueJs反应性

2 个答案: