我正在尝试将一个数组复制到另一个数组并像新数组一样使用它,而不对旧数组进行任何更改:
<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/ https://jsfiddle.net/4po1cpkp/7/
有没有办法根据数组模板创建新数组而不直接将其绑定到模板?
正如 Vue.js 文档所述:
在底层,Vue.js 附加了一个隐藏属性__ob__
and
递归地将对象的可枚举属性转换为 getter
和设置器以启用依赖项收集。具有以下键的属性
以 $ 或 _ 开头的将被跳过。
您可以存储以下划线符号开头的名称的模板数组:
data: {
testArray: [],
_templateArray: [{ name: "TEST" }]
},
ready: function() {
this.testArray = this.$data._templateArray;
}
或者如果您需要它作为 Vue.js 对象:
this.testArray = JSON.parse(JSON.stringify(this.templateArray));
对于大数据来说,第二种情况可能会很慢。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)