藿變化VUE元素順序

Question

我有這樣的對象結構：

lines: [{ 
    order: '1', 
    text: ' blue' 
},{ 
    order: '2', 
    text: 'green' 
},{ 
    order: '3', 
    text: 'yellow' 
}] 

，這是在網頁上呈現這樣的：

Blue 
Green 
Yellow 

我想重新排序的元素（和對象），而阻力滴，但按鈕上下。像這樣：

Blue - [down] 
Green [up, down] 
Yellow [up] 

每個項目符號都是一個組件。我怎樣才能做到這一點？

Answer 1

基於您提供的少量信息的假設，我放棄了它。

閱讀：Vuejs list caveats

從文檔：

由於JavaScript的限制，Vue公司無法檢測到以下更改到一個數組：
當您直接設置與索引，例如一個項目vm.items[indexOfItem] = newValue

所以，當你在Vue公司修改數組，你應該使用下列之一：

// Vue.set 
Vue.set(example1.items, indexOfItem, newValue) 
// Array.prototype.splice 
example1.items.splice(indexOfItem, 1, newValue) 

您的視圖可以看起來像：

<div id="app"> 
 
    <div v-for="(line, index) in lines"> 
 
    <p style="display: inline-block">{{line.text}}</p> 
 
    <button @click="up(index)" v-if="index !== 0">UP</button> 
 
    <button @click="down(index)" v-if="index !== lines.length-1">DOWN</button> 
 
    </div> 
 
</div>