Vue JS在列表向上和向下数组中移动项目

Question

我有一个vue js应用程序，它允许我向数组添加项目。

添加之后我想添加针对每个项目的功能，可以在项目列表中向上或向下移动项目。

我已经尝试了以下但我不认为Vue.JS有移动方法。

我的Vue方法：

changePos: function(item, type = 1) {
        this.items.move(this.items, item, type);
    },

我的模板调用方法：

<tbody>
    <tr v-for="(item, key) in items">
        <td>
            <button class="btn btn-sm btn-rounded" @click="changePos(item,1)">UP</button>
            <button class="btn btn-sm btn-rounded" @click="changePos(item,-1)">DOWN</button>
        </td>
        <td>@{{ item.code }}</td>
    </tr>
</tbody>

我收到以下错误：

  

this.items.move不是函数

Answer 1

选项1：上/下移动所有项目

TabItem

选项2：使用<TabControl ItemsSource="{Binding Sels}" />

function up() {
    const tmp = array.shift()
    array.push(tmp)
}

function down() {
    const tmp = array.pop()
    array.unshift(tmp)
}