如何重新安排数组位置来自API在Vuejs?

Question

props: {
groups: Array,
},
computed: {
groups: function(arr) {
alert('hi')
}
},

<div v-for="(item, index) in groups" :key="item.id" :id="item.id" class="group-name" @click="isOnlySelected ? null : $emit('setSelectedItem', item.id)">
</div>

如何重新安排数组位置来自前端的API ?

我能够显示从api到前端的所有值。但我需要添加一些条件，如排序数组值。示例(我需要将数组[6]的位置更改为数组[1]的位置。

Answer 1

一个选项是使用computed属性对数组进行排序/交换。然后，在v-for中使用该计算属性。

computed: {
rearrangeDataset () {
if (Array.isArray(this.dataset) && this.dataset.length) {
// Do your sorting or swapping. Always return a value in a computed property.
let tmp = this.dataset[2]
this.dataset[2] = this.dataset[0]
this.dataset[0] = tmp
return this.dataset
} else {
return []
}
}
}

然后在你的v-for中使用这个计算:

<div v-for="(item, index) in rearrangeDataset" :key="item.id" :id="item.id" class="group-name" @click="isOnlySelected ? null : $emit('setSelectedItem', item.id)">
</div>

我看到你在处理程序(它的ID)中使用这个数据集，所以我认为最好在计算属性中改变你的数据集并返回相同的数据集。

我在codepen为你创建了一个例子:https://codepen.io/LucasFer/pen/oNewOwv

请注意，您也可以使用watch来处理此问题。