如何更改 vue 元素的顺序

Posted 2023-02-23

【中文标题】如何更改 vue 元素的顺序

【英文标题】：How to change vue elements order

【发布时间】：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]

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

【问题讨论】：

首先你应该使用数字而不是字符串。

没关系。我知道。我不知道该怎么做

数组有索引

没有办法回答这个问题。它非常广泛且非常不清楚。

【参考方案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>