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] 位置。
uj5u.com熱心網友回復：
一種選擇是使用對陣列進行排序/交換的計算屬性。然后，您在 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.
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342609.html
標籤：javascript Vue.js 公理
上一篇：Vue，將資料添加到本地data.json檔案（json-server）
下一篇：串列中的真值