Reorganize items in an array using Vue JS for upward and downward movements

Question

Reorganize items in an array using Vue JS for upward and downward movements

In my Vue JS application, I have a feature that allows users to add items to an array.

After adding an item, I want to give users the ability to move the item up or down the array list.

I attempted to achieve this functionality with the following Vue method:

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

However, when calling this method in my template, I encountered an error:

this.items.move is not a function

This is how I called the method in my template:

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

javascript arrays vue.js

Answer 1

Answer №1

Method 1: Adjusting item positions

function moveUp() {
    const temp = array.shift();
    array.push(temp);
}

function moveDown() {
    const temp = array.pop();
    array.unshift(temp);
}

Method 2: Leveraging `Array.map()`

function moveUp(index) {
    if (index === 0) {
        array.push(array.shift());
    } else {
        array = array.map((element, i) => {
            if (i === index - 1) {
                return array[index];
            } else if (i === index) {
                return array[index - 1];
            } else {
                return element;
            }
        });
    }
}

function moveDown(index) {
    if (index === array.length-1) {
        array.unshift(array.pop());
    } else {
        array = array.map((element, i) => {
            if (i === index) {
                return array[index + 1];
            } else if (i === index + 1) {
                return array[index];
            } else {
                return element;
            }
        });
    }
}

Answer 2

Method 1: Adjusting item positions

function moveUp() {
    const temp = array.shift();
    array.push(temp);
}

function moveDown() {
    const temp = array.pop();
    array.unshift(temp);
}

Method 2: Leveraging `Array.map()`

function moveUp(index) {
    if (index === 0) {
        array.push(array.shift());
    } else {
        array = array.map((element, i) => {
            if (i === index - 1) {
                return array[index];
            } else if (i === index) {
                return array[index - 1];
            } else {
                return element;
            }
        });
    }
}

function moveDown(index) {
    if (index === array.length-1) {
        array.unshift(array.pop());
    } else {
        array = array.map((element, i) => {
            if (i === index) {
                return array[index + 1];
            } else if (i === index + 1) {
                return array[index];
            } else {
                return element;
            }
        });
    }
}

Reorganize items in an array using Vue JS for upward and downward movements

Answer №1

Method 1: Adjusting item positions

Method 2: Leveraging `Array.map()`

Similar questions

Receiving an error when trying to access the 'get' property of $http within a nested function

Choose a specific <div> element from an external page using Ajax/PHP

Adjusting the color of an element in ReactJS as the user scrolls and hits a specific position

Retrieve an array field across various documents and combine the elements to form a single object

Dynamic content for tooltips in Angular

What is the best way to send a prop to my home route following a redirect?

What are some ways to transfer information seamlessly between two PHP files without the need for a page refresh?

Issue with submitting form data using ajax

Pulling XML data with React-Native

Creating a two-dimensional array in C++ using strings and spaces instead of integers

Reducing Repositioning in Marionette for Better Performance

Invoking a function through an array within the model where said members are declared

Is it possible in GDB to configure memory to function like a character array?

Replace specific columns in a 2-dimensional numpy array using a 1-dimensional array

What is the best method to decrease every number in an array by 1?

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database

Vue.js is not incrementing the counter as expected

Illuminating Wireframes with Three.js MeshPhongMaterial

Creating a Nuxt project and integrating the Axios module

Obtain elements from an array containing multiple objects

Reorganize items in an array using Vue JS for upward and downward movements

Answer №1

Method 1: Adjusting item positions

Method 2: Leveraging Array.map()

Similar questions

Receiving an error when trying to access the 'get' property of $http within a nested function

Choose a specific <div> element from an external page using Ajax/PHP

Adjusting the color of an element in ReactJS as the user scrolls and hits a specific position

Retrieve an array field across various documents and combine the elements to form a single object

Dynamic content for tooltips in Angular

What is the best way to send a prop to my home route following a redirect?

What are some ways to transfer information seamlessly between two PHP files without the need for a page refresh?

Issue with submitting form data using ajax

Pulling XML data with React-Native

Creating a two-dimensional array in C++ using strings and spaces instead of integers

Reducing Repositioning in Marionette for Better Performance

Invoking a function through an array within the model where said members are declared

Is it possible in GDB to configure memory to function like a character array?

Replace specific columns in a 2-dimensional numpy array using a 1-dimensional array

What is the best method to decrease every number in an array by 1?

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database

Vue.js is not incrementing the counter as expected

Illuminating Wireframes with Three.js MeshPhongMaterial

Creating a Nuxt project and integrating the Axios module

Obtain elements from an array containing multiple objects

Method 2: Leveraging `Array.map()`