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

<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

v-model 修饰符返回空

Nuxt3: 安装vue3-spinner (error: require is not defined in ES module scope)

如何在 vue2.7 中删除 slot-scope

超出最大调用堆栈大小 - Vue路由

如何将 vuejs 项目部署到 heroku

Object.assign 没有正确复制

vuex 中 { dispatch, commit } 的类型是什么?

Vuetify - 如何保持第一个扩展面板默认打开,如果我打开另一个面板,其他面板应该关闭?

vuejs中watch方法和计算方法有什么区别

将自定义部分添加到 v-autocomplete 下拉列表

Vue-test-utils:在单个测试中多次使用 $nextTick

Vuejs模板继承

当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用

Vuetify v-btn 路由活动类问题

如何从 v-for 创建的对象中绑定多个类?

如何从 vue.js 捕获 Jquery 事件

如何异步验证 Vuetify 文本字段?

从 vue.js 中的 store 获得的计算(computed)属性的设置器

Vue $refs 对象的类型为 unknown未知