使用axios

Question

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

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

我正在使用两个属性，因为我将使用它们中的一个来创建复选框列表，而另一个则用于存储选中的复选框。首先，将选中所有复选框。

问题：如果我从selectTags（使用Google Chrome Vue面板）删除了一个选项，则会从tag属性中删除相同的选项。

此问题仅在使用axios时出现。在下面的示例中，我可以编辑一个属性而无需更改其他属性。

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

Answer 1

问题在于两个属性都引用相同的数组对象。

常见的解决方案是使用spread syntax或Array.from创建它的副本：

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