Vue.js 函数在第一次调用时工作，但在第二次调用时不工作

我有三个v-select，您可以在其中选择某些值。所有这些都应该是唯一的（而不是下拉）。我有三个数组。第一，使值​​在下拉列表中，始终显示相同的数组（此数组对于函数不重要）。第二个在v-model的帮助下绑定到相应的下拉列表。第三是要认识到什么是价值观​​我必须交换，这样所有的价值观​​保持独特。奇怪的是，第一次函数工作时，第二次第三个数组的更改与第二个数组的更改完全相同，第二个数组通过v-model绑定（将完全相同）。但是，我会在任何位置更改第三个数组的值，函数中除外

<template>
  <div>
    <v-select
      v-model="selectedCollections[0]"
      :items="collections"
      label="1. Collection"
      @change="uniqueCollections(0)"
    />
    <v-select
      v-model="selectedCollections[1]"
      :items="collections"
      label="2. Collection"
      @change="uniqueCollections(1)"
    />

    <v-select
      v-model="selectedCollections[2]"
      :items="collections"
      label="3. Collection"
      @change="uniqueCollections(2)"
    />
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: [String],
      default: ''
    }
  },
  data () {
    return {
      collections: [
        "Playlist",
        "Screen",
        "Location"
      ],
      selectedCollections: [
        "Playlist",
        "Screen",
        "Location"
      ],
      selectedStaticCollections: [
        "Playlist",
        "Screen",
        "Location"
      ]
    }
  },
  methods: {
    uniqueCollections: function (index) {
      var before = this.selectedCollections[index]
      var indexList = this.selectedStaticCollections.indexOf(before)

      var temp = this.selectedStaticCollections[index]
      this.selectedStaticCollections[index] = this.selectedStaticCollections[indexList]
      this.selectedStaticCollections[indexList] = temp
      this.selectedCollections = this.selectedStaticCollections
    }
  }
}
</script>

导出默认值{
道具：{
身份证：{
类型：[字符串]，
默认值：“”
}
},
数据（）{
返回{
收藏：[
“播放列表”，
“屏幕”，
“地点”
],
选定的集合：[
“播放列表”，
“屏幕”，
“地点”
],
selectedStaticCollections：[
“播放列表”，
“屏幕”，
“地点”
]
}
},
方法：{
uniqueCollections:函数（索引）{
var before=this.selectedCollections[索引]
var indexList=this.selectedStaticCollections.indexOf（之前）
var temp=this.selectedStaticCollections[索引]
this.selectedStaticCollections[索引]=this.selectedStaticCollections[索引列表]
此.selectedStaticCollections[indexList]=temp
this.selectedCollections=this.selectedStaticCollections
}
}
}

---

为什么第三个数组在第二次调用函数时被更改？

正如我在函数中看到的，您正在将

数组

分配给

数组

。数组在JS中是

对象

，其行为与

原语不同。在该赋值之后，如果对其中任何一个数组进行任何更改，则两个数组都将更改


让arr1=[1,2,3]；
设arr2=[4,5,6]；
arr1=arr2；
arr2[2]=999；
console.log（arr1[2]）；//还将记录999
，正如我在您的函数中看到的那样，您正在将
array
分配给
array
。数组在JS中是
对象
，其行为与
原语不同。在该赋值之后，如果对其中任何一个数组进行任何更改，则两个数组都将更改


让arr1=[1,2,3]；
设arr2=[4,5,6]；
arr1=arr2；
arr2[2]=999；
console.log（arr1[2]）；//还将记录999
为什么uniqueCollections函数未包装在该函数中的methods:{}属性中component@chandrasekar我不小心删除了很多。现在是inOkie，我来查一查你的问题不太清楚。请命名更改的数组。为什么uniqueCollections函数未包装在方法中：{}属性中component@chandrasekar我不小心删除了很多。现在是inOkie，我来查一查你的问题不太清楚。请命名要更改的阵列。