[Vuejs]-How to change vue elements order

by

4👍

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, e.g. 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>

Leave a comment