Switching elements in an array using Vue.js

Within my vue.js web application, I am attempting to switch the positions of two rows in a forum. Below is the code snippet I am using:

export default {
        data() {
            return {
                forums: []
            }
        },

        methods: {
            increment(forum, index) {
                ForumService.increment(forum)
                    .then(() => {
                        let temp = this.forums[index];
                        this.forums[index] = this.forums[index + 1];
                        this.forums[index + 1] = temp;
                    });
            }
        }
    }

However, for some reason nothing seems to be happening when I trigger this action. Can someone point out what might be incorrect within this code?

Answer №1

Although @dfsq is accurate in mentioning the use of index++, Vue does not support direct array mutations as it cannot observe them. You must utilize a mutation method to make changes.

Give this a shot:

.then(() => {
  let items = [this.data[index], this.data[index + 1]];
  this.data.splice(index, 2, items[1], items[0]);
});

I haven't had a chance to test it yet, but I will update once I do.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After selecting a delivery method, the checkout feature on opencart 1.5.6.4 is malfunctioning

Check out my online shop at store.suhaskhamkar.in. I've set it up using OpenCart version 1.5.6.4, but I'm facing an issue with the checkout process. It seems to get stuck at step #4, which is the Delivery method selection. Upon checking the conso ...

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

My website works perfectly in all browsers, except for IE9. After some investigation, I discovered that the issue lies with a jQuery plugin called multilevelpush.js. While it works great on other browsers, it simply won't cooperate with IE9. Upon fur ...

Ways to verify if the inner <div> contains any text

I am attempting to determine if the inner <div> contains the text "Ended" and then remove it if it does. There are multiple <div> elements with the same class. I have attempted to use the .filter() method. My goal is to remove the container_one ...

How can I apply and delete a css class only while scrolling in a React application?

Currently, I am designing a pretend blog layout to showcase my work. The grid of posts features cards that are precisely 400x400 in size with a hover effect that magnifies and adds a drop shadow (this is visible in the dashboard route). However, an issue ...

Developing UIs in React that change dynamically according to the radio button chosen

Problem Statement I am currently developing a web application feature that computes the heat insulation factor for a specific area. You can view the live demonstration on Codesandbox <a href="https://codesandbox.io/p/github/cloudmako09/btu-calc/main?im ...

Attempting to retrieve the current time using JavaSscript

const currentTime = new Date(); const hours = now.getHours(); Console.log(hours); This block of code is returning an error message... Uncaught ReferenceError: now is not defined Please note that this snippet is written in JavaScript. I attempted to us ...

Guide on deactivating a button when a numerical value is detected within a field in VUE JS

I need help figuring out how to automatically disable a button when a field contains a number. Here is an example of my code: disabledSubmitButton() { return this.$v.$error || this.firstName === '' || this.lastName === '' || ...

Error: Unable to retrieve data due to null value (property 'detail' is undefined)

When I use useEffect() function to set the document title to 'View Orders | Bothub' and fetch data from a backend URL, I encounter an error. The error message reads: Unhandled Rejection (TypeError): Cannot read properties of null (reading 'd ...

Despite having both React and Firebase enabled, the "sign-in provider" feature appears to be disabled

Within my Authentication settings, the Sign-in Method is configured to use Email and Password as enabled. I've set up a handler for form submission that looks like this: createUser(e){ e.preventDefault(); const email = this.createEmail.value ...

"Using the Google Maps directive inside a separate modal directive in Angular results in a blank map display

As a newcomer to Angular, I have encountered a hurdle while attempting to incorporate a 'google maps' directive inside another directive. The following code showcases a 'modal-view' directive that loads a form: angular.module(&apo ...

Contrasting the lib and es directories

I am seeking clarity on my understanding. I am currently working with a npm package called reactstrap, which is located in the node_modules folder. Within this package, there are 4 folders: dist es lib src I understand that the src folder contains the s ...

The Node.js express seems to be unable to fetch the css and js files

Sharing my main.ts file in which I am facing issues with linking my css and js files. view image import express from 'express'; import {Request,Response} from 'express'; import expressSession from 'express-session'; import pat ...

Using Vue.js to alter the CSS class property

I am exploring Vue.js and looking to modify a CSS class property. Here is the HTML code utilizing the specified class: <div class="customTimer"></div> Here is the corresponding CSS code: .customTimer { width: 100%; height: 1 ...

How to handle JavaScript exceptions when encountering a null JSON value?

I am receiving data in JSON format using AJAX from an action in Struts 2 for my view. The data consists of a set of information. For example: {"home": "1234", "room": null} When I try to read data.home, I successfully get the value 1234. However, when a ...

From JSON to PNG in one simple step with Fabric.js

I am looking for a way to generate PNG thumbnails from saved stringified JSON data obtained from fabric.js. Currently, I store the JSON data in a database after saving it from the canvas. However, now I want to create a gallery of PNG thumbnails using thi ...

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

Is it acceptable to copy and paste the Package-Lock.json file from 19 hours ago in order to resolve the "ValidationError: Progress Plugin Invalid Options" issue in Vue 3?

My Vue 3 project was running smoothly, and I pushed the latest version to GitHub about 19 hours ago. However, when I tried running npm run serve 5 hours later, an error occurred with the following information: > <a href="/cdn-cgi/l/email-protection" ...

Where can I find the @types for a specific lodash package?

Seeking to utilize a specific function from lodash - assignin. I have successfully installed lodash.assignin and incorporated it into my project: import assignIn = require('lodash.assignin'); However, when compiling, an error occurs: "error TS2 ...

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

Vue.js encountered an issue: Conflict Error - Multiple assets are emitting different content to the same file name index.html

Upon creating a new vue.js project on my MacBook and running "npm run serve", I encountered the following error. No changes have been made to any files since the project was created. markus@Markuss-MBP meinerstesprojekt % npm run serve > <a href= ...