Question

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

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

空项目数组：[ ob ：观察者]

这是一段代码摘录：

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);

         });

     },

问题在于，当尝试向数组中的对象添加新属性时，我收到错误：

错误TypeError：item。$ add不是函数

当我调试时，我发现它发生了，因为它认为观察者对象是数组的一部分。

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

Answer 1

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

Vue.js是被动的并且会自动检测更改，但仅适用于对象本身，而不是其属性。对于数组vue只会检测这些方法的更改（更多关于vue.js https://vuejs.org/v2/guide/list.html#ad中的列表呈现）：

推（）
pop（）方法
移（）
的unshift（）
剪接（）
排序（）
反向（）

但物业怎么样？您可以Vue.set(object, property, value) vue在任何this.$set实例中使用Vue或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);查看数组或对象深度的更改。

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

{{1}}

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

Vue：自动填充Observer对象的空数组

1 个答案: