如何更改 vue 元素的顺序

【问题标题】：How to change vue elements order如何更改 vue 元素的顺序
【发布时间】：2017-07-05 20:34:29
【问题描述】：

我有这个对象结构：

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

这在页面上呈现如下：

Blue
Green
Yellow

我想重新排序元素（和对象）而不使用拖放，但使用按钮向上和向下。像这样：

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

每个项目符号都是一个组件。我怎样才能做到这一点？

【问题讨论】：

首先你应该使用数字而不是字符串。
没关系。我知道。我不知道该怎么做
数组有索引
没有办法回答这个问题。它非常广泛且非常不清楚。

标签： javascript vue.js vuejs2 vue-component

【解决方案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>

【讨论】：