Vue：空数组自动填充观察者对象

Question

我正在尝试在数据中初始化一个空数组，然后从服务器获取 JSON 并填充它。

问题是数组总是有一个额外的 Observer 对象，所以当我记录它时，我会看到：

空项目数组：[ob: Observer]

这是一段代码摘录：

data() {
        return {
            items: []
        }
    },
 created() {
         this.$http.get('/api/menus').then(function (response) {

            console.log('items before', this.items); //THIS LOGS items before: [__ob__: Observer]
             this.items = [].concat(response.body);
            this.items.forEach(function (item) {
              console.log('item', item);

              item.$add('active', false);

              item.tests.forEach(function (test) {
                  test.$add('active', false);
              });
        });

         }).catch(function (err) {
             console.error('err', err);

         });

     },

问题是当尝试向数组中的对象添加新属性时出现错误：

err TypeError: item.$add 不是函数

当我调试时，我看到它发生是因为它将观察者对象视为数组的一部分。

正常吗？我应该只检查 $add 是否存在吗？那么在视图中渲染的时候，Vue会忽略这个对象吗？

Answer 1

根据您的代码，您希望将items 对象中的active 属性设置为false。您还想将每个项目的tests 属性中的所有属性active 设置为false。

Vue.js 是响应式的，会自动检测变化，但只针对对象本身，而不是它们的属性。对于数组，vue 只会检测这些方法的变化（更多关于 vue.js 中的列表渲染https://vuejs.org/v2/guide/list.html#ad）：

• 推()
• pop()
• shift()
• unshift()
• 拼接()
• 排序()
• 反向（）

但是属性呢？您可以通过force vue 在任何Vue 实例中使用Vue.set(object, property, value) 或this.$set 查看数组或对象的深度变化。

因此，在您的示例中，您可以像这样实现它：

this.items.forEach(function (item, key) {
    console.log('item', item);

    this.$set(this.items[key], 'active', false);

    item.tests.forEach(function (test, testKey) {
        this.$set(this.items[key].tests[testKey], 'active', false);
    }, this);
}, this);

它应该可以工作。这是工作示例：http://jsbin.com/cegafiqeyi/edit?html,js,output（使用了一些 ES6 特性，不要混淆）