如何更改 vue 元素的顺序

Question

I have this object structure:

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

And this is rendered on the page like this:

Blue
Green
Yellow

I want reorder the elements (and the object) without drag-drop, but with button up and down. Like this:

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

Each bullet is a component. How can I achieve that?

Answer 1

Based on assumptions from the little information you provided, I gave it a go.

Read: Vuejs list caveats

From the documentation:

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:
When you directly set an item with the index, eg vm.items[indexOfItem] = newValue

So when you modify an array in Vue you should use one of the following:

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

Your view can look something like:

 <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>