Question

我正在尝试将一个数组复制到另一个数组，并将其用作新数组而不更改旧数组：

<div id="app">
    <div class="form-group">
       <label>Test input</label>
       <input v-model="testArray[0].name" type="text" class="form-control" placeholder="Input">
    </div>
    <br>
    <pre>testArray: {{ testArray[0] | json}}</pre>
    <pre>templateArray: {{ templateArray[0] | json  }}</pre>

new Vue({
  el: '#app',
  data: {
      testArray: [],
      templateArray: [{name: "TEST"},], 
  },
  ready: function() {
      this.testArray = this.templateArray.slice(0);
    },
});

问题是我正在更新新数组'testArray'我也改变旧数组'templateArray'。

正在运行的脚本：https://jsfiddle.net/4po1cpkp/7/

有没有办法基于数组模板创建新数组而不直接将其绑定到模板？

Answer 1

正如Vue.js文档所说：

引擎盖下，Vue.js附加了一个隐藏的属性__ob__和递归将对象的可枚举属性转换为getter 和setter以启用依赖项集合。具有键的属性以$或_开头，跳过。

您可以存储名称从下划线开始的模板数组：

  data: {
      testArray: [],
      _templateArray: [{ name: "TEST" }]
  },
  ready: function() {
      this.testArray = this.$data._templateArray;
  }

或者你是否需要它作为Vue.js对象：

this.testArray = JSON.parse(JSON.stringify(this.templateArray));

对于大数据，第二种情况可能会很慢。

Answer 2

我使用Vue扩展函数Vue.util.extend在Vue 2中复制带有un-binding的数组：

this.items_list.push(Vue.util.extend({}, this.list_item));

Answer 3

您可以在MDN Array.prototype.slice()

中使用slice()数组原型阅读更多内容

this.testArray = [].slice.call(this.templateArray)

如何在Vue.js中取消绑定数组副本

3 个答案: