Vue JS move item in list up and down array

Question

I have a vue js application which allows me to add items to an array.

After adding I'd like to add the ability against each item the ability to move the item up or down the array list.

I've tried the following but I don't think Vue.JS has the move method.

My Vue method:

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

My template calling the method:

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

I get the following error:

this.items.move is not a function

you need to have a method named move() in your methods: {} — samayo
– samayo, Commented Oct 20, 2017 at 8:59
Could you refer a link so I can research how to move an item up and down in an array using vue js? — Dev.W
– Dev.W, Commented Oct 20, 2017 at 9:00
You can find an implementation here - stackoverflow.com/a/5306832/1696352 — strelok2010
– strelok2010, Commented Oct 20, 2017 at 9:47
I think that your problem is that you are calling this.items.move, but the function move(), is referenced in your Vue instance, you should call: this.move(this.items...) — JP. Aulet
– JP. Aulet, Commented Oct 20, 2017 at 10:38

ajin · Accepted Answer · 2021-02-13 12:38:49Z

option 1: move all items up/down

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

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

option 2: use `Array.map()`

function up(index) {
    if (index === 0) { // if its the first in the array
        array.push(array.shift()) // same as option 1
    } else {
        array = array.map((element, i) => { // iterate array and change places
            if (i === index - 1) {
                return array[index];
            } else if (i === index) {
                return array[index - 1];
            } else {
                return element;
            }
        })
    }
}

function down(index) {
    if (index === array.length-1) { // if its the last in the array
        array.unshift(array.pop()) // same as option 1
    } else {
        array = array.map((element, i) => { // iterate array and change places
            if (i === index) {
                return array[index + 1];
            } else if (i === index + 1) {
                return array[index];
            } else {
                return element;
            }
        })
    }
}

Collectives™ on Stack Overflow

Vue JS move item in list up and down array

1 Answer 1

option 1: move all items up/down

option 2: use `Array.map()`

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

option 1: move all items up/down

option 2: use Array.map()

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

option 2: use `Array.map()`