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)

您的观点可能如下所示：

＆＃13;

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

＆＃13;

如何更改vue元素顺序

1 个答案: