Vue.js 可变模型阵列

我有一个简单的Vue模板，由一个具有两个数组的对象组成（虚拟/占位符与实际数据）

---

{{dummyValue}}

{{value}}

首先，我只有虚拟值。在此过程中发生了一些事情（我解析了一个CSV文件），我需要用实际值交换我第一次渲染的虚拟数据。 因此，我将我的真实数据附加到真实数据数组（

csvValues

）中，并希望

v-else

能够处理它

---

这不起作用-为什么，我的方法错了？

显然，Vue无法在两个数据源（dummyValues和csvValues）之间切换。 我不得不使用第三个，它现在保存/循环前两个元素中的任何一个。因此，我不是从一个或其他数组构建视图，而是将内容弹出/推送到我的第三个数组（renderingValues），并始终迭代该数组

要呈现

dummyValues

？
-从渲染值中弹出所有内容（以前的

csvvalue

） -将所有内容从

dummyValues

推送到

renderingValues

---

-迭代渲染值显然，Vue无法在两个数据源（dummyValues和csvValues）之间切换。 我不得不使用第三个，它现在保存/循环前两个元素中的任何一个。因此，我不是从一个或其他数组构建视图，而是将内容弹出/推送到我的第三个数组（renderingValues），并始终迭代该数组

要呈现

dummyValues

？
-从渲染值中弹出所有内容（以前的

csvvalue

） -将所有内容从

dummyValues

推送到

renderingValues

---

-迭代

renderingValues

尝试使用您的语法/使用数据部分似乎很奇怪，不要在此处定义逻辑。定义tableColumns如下tableColumns:[]，然后将“push”部分移动到一个方法，并调用它，例如在mounted.@M.suurl上。如果my data（）方法中没有逻辑，它将返回一个普通数组。问题不在于显示初始数据，而在于随后修改模型——更改不会反映出来。我可以在使用Chrome或Vue扩展进行调试时检查数据，新元素在那里，但它们没有呈现。这似乎是一个关于反应性的问题，请看：不确定您是否理解我的问题-我不想呈现“非反应性”属性-它们都是“反应性”的，它们是预先声明的。在它们之间切换不起作用。无论if分支是第一次呈现的，这都是我需要继续呈现的分支，否则我只会得到一个“未定义”值，该值等于第一次呈现列表中的元素数（即使if的计算结果应该为false并执行ELSE分支）。尝试使用您的语法/数据部分的使用看起来很奇怪，不要在这里定义逻辑。定义tableColumns如下tableColumns:[]，然后将“push”部分移动到一个方法，并调用它，例如在mounted.@M.suurl上。如果my data（）方法中没有逻辑，它将返回一个普通数组。问题不在于显示初始数据，而在于随后修改模型——更改不会反映出来。我可以在使用Chrome或Vue扩展进行调试时检查数据，新元素在那里，但它们没有呈现。这似乎是一个关于反应性的问题，请看：不确定您是否理解我的问题-我不想呈现“非反应性”属性-它们都是“反应性”的，它们是预先声明的。在它们之间切换不起作用。无论我第一次渲染的是哪个if分支，这都是我需要继续渲染的分支，否则我只会得到一个“未定义”值，该值等于第一次渲染列表中的元素数（即使if的计算结果应该为false并执行ELSE分支）。

data() {
  var tableColumns = new Array();
  tableColumns.push({"dummyValues": ["date 1", "date 2"], "csvValues": []});

  var variables = {
    "tableColumns": tableColumns
  };

  return variables;
}

<td v-for="(item, key, index) in tableColumns">
    <span v-if="item.csvValues.length == 0" v-for="dummyValue in item.dummyValues">
       {{dummyValue}} <br />
    </span>
    <span v-else v-for="value in item.csvValues">
      {{value}} <br />
    </span>

</td>