时间戳

首页 > 解决方案 > 将对象数组动态添加到 Vue（反应性问题）

vue.js - 将对象数组动态添加到 Vue（反应性问题）

问题描述

我知道，为了使对象或数组在 Vue 中具有响应性，必须在根数据结构上定义其属性。

将对象数组添加到根数据结构上定义的预先存在的变量，并使该数组中每个元素的每个属性都具有响应性的最佳方法是什么？

我尝试遍历数组并将每个数组添加到根数据模型中，即：

  these_terms.forEach(function(term, idx) {
    term.selected = false;
    Vue.set(vm.game.set,idx,term);
  });

但是，Vue 在以后更改时仍然不会响应“term.selected”属性。

有没有更好的方法来实现我的目标，还是我需要求助于 $forceUpdate？（手册说在 99% 的情况下使用 $forceUpdate，你做错了什么，因此这篇文章）

标签： vue.jsvue-reactivity

解决方案

在您的父组件上，执行以下操作：

  1. 用一个空数组开始创建一个数据属性
  2. 制作一个调用方法的按钮
  3. 在该方法中，推送到空数组。

步骤 3 示例

    methods: {
      _addGroup: function() {
        let result = {
          id: this.wizardGroups.length + 1,
          name: '',
        };
        this.wizardGroups.push(result);
      },

如果您之后需要附加其他属性，您可以遍历对象数组并Vue.set()应用

推荐阅读