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

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

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

empty items array: [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 is not a function

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

正常吗我应该只检查$add是否存在？在视图中渲染时,Vue会忽略此对象吗？

解决方法:

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

Vue.js是反应性的,可以自动检测更改,但仅针对对象本身,而不是其属性.对于数组,vue将仅通过这些方法检测更改(有关vue.js https://vuejs.org/v2/guide/list.html#ad中的列表呈现的更多信息)：

> push()
> pop()
> shift()
> unshift()
> splice()
> sort()
>反向()

但是属性呢？您可以在任何Vue实例中使用Vue.set(object,property,value)或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);

它应该工作.这是工作示例：http://jsbin.com/cegafiqeyi/edit?html,js,output(使用了某些ES6功能,请不要混淆)

标签：vue-js,vuejs2,javascript
来源： https://codeday.me/bug/20191026/1934124.html