Vue.js data() 属性在使用 axios 加载值后同步

Question

我正在使用 axios 加载字符串数组：

beforeCreate () {
this.$http
.get('hashtags')
.then(response => {
this.tags = response.data.hashtags
this.selectTags= response.data.hashtags
})
}

我正在使用两个属性，因为我将使用其中一个属性来创建复选框列表，另一个用于存储选中的复选框。最初，将选中所有复选框。

问题是：如果我从selectTags中删除了一个选项(使用谷歌浏览器Vue面板(，则相同的选项将从tag属性中删除。

这个问题只在使用公理时出现。在下面的示例中，我可以编辑一个属性而不更改另一个属性。

beforeCreate () {
this.tags = ['a', 'b', 'c']
this.foo = ['a', 'b', 'c']
}

Answer 1

问题是两个属性都引用同一个数组对象。

一个常见的解决方案是使用扩展语法或Array.from创建它的副本：

// ...
this.tags = [...response.data.hashtags]
this.selectTags= [...response.data.hashtags]
//...