我试图将一个数组复制到另一个数组,并像使用新数组一样使用它,而不对旧数组进行任何更改:

<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".

playbook :https://jsfiddle.net/4po1cpkp/7/

是否有任何方法可以基于数组模板创建新数组,而不直接将其绑定到模板?

推荐答案

作为Vue.js说文档:

在引擎盖下,Vue.js附加了一个隐藏属性__ob__

您可以存储名称以下划线符号开头的模板数组:

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

或者你需要它作为Vue.js对象:

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

第二种情况对于 Big Data 来说可能很慢.

Vue.js相关问答推荐

Vuetify 3 v-radio-group 将模型设置为 null

为什么 Vue 在将设置脚本中的计算(computed)属性渲染到模板时找不到变量

使用内部方法创建计算(computed)属性是否合法?

如果单元格不可见,则以编程方式打开行的编辑模式. Ag 网格,Vue.js

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

已分配计算(computed)属性,但它没有设置器

vuejs:将props传递给javascript中的组件?

全局方法和实例方法有什么区别?

如何在 Vue.js 中传递 $router.push 中的数据?

重新加载发布到 Github 页面的 Vue 网站时出现 404

如果我观看解构的props,Vue 3 手表将无法正常工作

如何禁用 nuxt 默认错误重定向

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue?

Select 下拉列表中的复选框后如何清除 v-autocomplete(多个)搜索输入?

安装后运行computed计算函数

Vue组件未在laravel 5.3中使用Passport 显示

从 ajax 调用填充 Vue.js 中的下拉列表

vue-router如何持久化导航栏?

使密码字符隐藏在 Vuetify 字段中

在 Vue 单元测试中单击按钮时触发表单提交