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 ponent. How can I achieve that?

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 ponent. How can I achieve that?

• javascript
• vue.js
• vuejs2
• vue-ponent

• well first off you should use a number for order instead of a string. – David L Commented Feb 16, 2017 at 16:30
• It's ok. I know it. I do not know how to do it – Dave Cartledge Commented Feb 16, 2017 at 16:32
• The array has index – Dave Cartledge Commented Feb 16, 2017 at 16:33
• There's just no way to answer this question. It is incredibly broad and incredibly unclear. – David L Commented Feb 16, 2017 at 16:33

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