nuxt操作数组对象尽量使用push,不要使用obj[]这样的

今天碰上了个大问题，以php的习惯写了数组，结果在v-for模板中展示的时候死活没有数据，模板中打印出来是[]，这就奇怪了，我以为是在页面其它部分把变量值重置了，折腾了两三个小时，发现真不是，console。log有值 ，模板中打印无值

在Nuxt中，我们可以尽量使用push操作数组对象而不是使用obj[]来添加项目。这是因为Nuxt的数据响应性是基于Vue的响应式系统的。

使用push方法可以确保数据的响应性，意味着当我们添加新的项目时，相关的视图会自动更新。这样可以避免手动重新渲染视图。

示例代码：

// 在data属性中定义一个数组

data() {

  return {

    items: []

  }

},



// 添加新的项目

methods: {

  addNewItem() {

    this.items.push({ name: 'New Item' });

  }

}

在上述示例中，我们使用了push方法向items数组中添加了一个新的项目。当数据发生变化时，相关的视图会自动更新。

相比之下，如果我们使用obj[]方式来添加项目，Nuxt可能无法检测到数据的变化，从而不会重新渲染视图。

// 在data属性中定义一个数组

data() {

  return {

    items: []

  }

},



// 添加新的项目

methods: {

  addNewItem() {

    // 这种方式可能不会触发视图更新

    this.items[this.items.length] = { name: 'New Item' };

  }

}

在这个示例中，我们使用了obj[]的方式向items数组中添加了一个新的项目。由于Nuxt无法检测到数据的变化，视图可能无法正确更新。

总结来说，使用push方法操作数组对象可以确保数据的响应性，从而避免手动重新渲染视图。