Cannot update VUEjs array following the splice operation

My array is only updating in the console and not in the DOM. I've already tried using :key but it's still not working. Here is my code:

<div style="margin-top: 5px;" v-for="(file, index) in editedItem.file_name" 
                                         :key="editedItem.file_id[index]" >
    <a :href="`/biodidb/storage/${file}.${editedItem.file_type[index]}`" target="_blank">
        {{`${file}.${editedItem.file_type[index]}`}}
    </a>
    <span style="cursor: pointer;" @click="deleteData(editedItem.file_id[index], 'photos', index)">
        <v-icon
            small
            class="ml-3"
        >
           delete
        </v-icon>
        Delete 
    </span>
</div>

JS:

deleteData(id, type, index) {
    this.editedItem.file_name.splice(index,1);
    this.editedItem.file_type.splice(index,1);
    this.editedItem.file_id.splice(index,1);
}
enter code here

I have a method called update as well. When clicked, it assigns an object to the 'editedItem' in my data.

data() {
    return {
        editedItem: {}
    }
},
methods: {
      update(id, item) {
             this.editedItem = Object.assign({}, item);
      }
}
javascriptvue.jsvuejs2

Answer №1

What does your editedItem structure look like? Are you using the v-for directive to iterate over data in the following manner?


  data: {
    editedItem: {
      file_id: ['2'],
      file_type: ['type 2'],
      file_name: ['example'],
    }

Answer №2

If your information is structured in this way:

...
data:function(){
    return{
        editedItem{}
    }
}
...

Simply add an array to the editedItem like so

editedItem.file_name = ['myFileName'];

Afterwards, your new file_name attribute will not be reactive and will not be tracked by Vue.

To ensure that Vue tracks the arrays you intend to use, you must specify them in the data function:

...
data:function(){
    return{
        editedItem:{
            file_name:[]
        }
    }
}
...

Alternatively, you can add a new property to editedItem using Vue.set()

Vue.set(editedItem,'file_name',['myFileName'];

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

What is the best way to manage the package-lock.json file during deployment from git using SSH?

In my deployment process, I utilize a Git repository to check code in. By using web hooks, a deployment script is triggered on the production server. Once connected to Git via SSH and a .pem key on the server, I perform a Git pull, npm install, webpack bui ...

javascriptnode.jsgitnpm

Ways to showcase the object on the console

How can I display the object function in the console? When I try, nothing is displayed. Can you please help me figure out what went wrong? I know I must have made a mistake somewhere, as this is my first question on Stack Overflow. import React, ...

javascriptreactjsclassstate

Is the Child-Parent-Communication Method Lost?

I'm currently working on setting up communication between child and parent components in nuxtjs. Here is my child component: <div> <b-nav-item @click="clicked" :class="{active: active}">{{item.name}}</b ...

vue.jsnuxt.js

Submit a set of form variables to PHP using AJAX

I am attempting to transmit a set of form parameters to a PHP script for processing. In the past, I have achieved this using $.post, but now my goal is to accomplish it exclusively with $.ajax. Below is the jQuery click event designed to send all variabl ...

javascriptphpjqueryajax

How to utilize hbs variable in an external JavaScript file

Currently, I am utilizing hbs (express handlebars) to display a page. I am interested in retrieving some variables from chat.hbs and accessing them in an external file named chat.js on the client side. Server Side res.render('chat', {chatr ...

javascriptnode.jsexpresshandlebars.js

Extracting server error messages on the client side using Node.js

Before storing data in the database, my server performs validation checks. If it is unable to save the data into the database, an error message is sent. In my client-side application, how can I retrieve and display this error message? Below is the HTTP r ...

javascriptnode.jsexpresstitanium-mobile

Sign up a new user using Passport JS

Looking to utilize passport.js for adding a new user from the signup page. The signup form is as follows: <form id="Signup-form" name="SignupForm" action="/signup" method="post"/> <input type="text" id="firstname" name="Firstname" > <input ...

javascriptnode.jsexpressauthenticationpassport.js

Designs for an HTML5 Cheeseburger navigation interface

I've been struggling to implement a functional and visually appealing hamburger menu on my website. The challenge lies in integrating the menu seamlessly into the page rather than having it just pop up abruptly. Despite trying various webkit tools, I ...

javascripthtmlcsswebkit

Include form data into an array of objects within an Angular data source

I am struggling to add the edited form data from edit-customers-dialog.ts into an array of objects in my datasource. The form.data.value is returning correctly, but I'm facing issues with inserting it properly into the array. As a beginner in Angular ...

javascriptangulartypescriptangular-materialangular-reactive-forms

What are the steps to refreshing a table using AJAX?

Struggling to update a table from my database, I have been following a PHP guide but can't get it to work. In a separate file, the data is retrieved and displayed in a table. I am attempting to use JavaScript to refresh this file. This code snippet ...

javascriptjqueryajaxcoldfusioncoldfusion-9

Problem with Scroll Listener on Image in Angular 4: Window Scroll Functioning Properly

Hello, I am a newcomer who is currently working on creating a small application that allows users to zoom in on an image using the mouse scroll. <img (window:scroll)="onScroll($event) .....></img> The code above works well, however, it detec ...

javascripthtmlangularscroll

The chosen element contains a value of -1

When the select element has a selected value of 4, form data is sent to the server and the controller returns a partial view. <script> $(document).ready(function () { var objSel = document.getElementById("IDVacationApplicationTyp ...

javascriptjqueryasp.net-mvc

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

javascripthtmlcssarraysobject

What is the best way to mention @here with an attachment?

I'm attempting to use the canvas say command to display an image with an @here mention included, but unfortunately it only shows the image without making the mention. Below is what I have attempted: message.channel.send(`@here\n`+attachment); ...

javascriptnode.jscanvasdiscorddiscord.js

The argument provided for gantt.parse or gantt.load is not valid in Laravel and Vue.js development

I am currently working on implementing a gantt chart using the Dhtmlx library in my project. I am trying to pass the project ID into the gantt.load function to display only the gantt chart for that specific project. However, I am encountering an error mess ...

laravelvue.jslaravel-6gantt-chartdhtmlx

How come the splice method is changing the value of the original object?

There's something strange happening with this code I'm trying out. Code: const x = [{ a: 'alpha', b: 'beta' }, { a: 'gamma' }]; const y = x[0]; y.a = 'delta'; x.splice(1, 0, y) console.log(x) Output: [ ...

javascripttypescript

A step-by-step guide on how to implement a window scroll-controlled color transition

I've implemented jQuery code to change the opacity of my navbar's background as the user scrolls, transitioning from transparent to blue. Here's the snippet: $(window).scroll(function(){ var range = $(this).scrollTop(); var limit = 45 ...

javascriptjqueryhtmlcssscrolltop

Creating a bold portion of a string

My task involves dynamically creating <p> elements within a div based on the contents of my codeArray, which can vary in size each time. Instead of hard-coding these elements, I have devised the following method: for(i=1;i<codeArray.length;i++) ...

javascripthtmlcssstring

When an element in vue.js is selected using focus, it does not trigger re

One of my tasks involves tracking the last selected input in order to append a specific string or variable to it later on. created: function () { document.addEventListener('focusin', this.focusChanged); } focusChanged(event) { if (event ...

javascriptvue.jsvue-reactivity

Tips for building a versatile client-server application with separate codebases for the JavaScript components

We are embarking on the process of rebuilding our CMS and leveraging our expertise with VueJS. Despite our familiarity with VueJS, we won't be able to create a full single-page application due to the presence of server-side rendering files (JSP). The ...

javascripttypescriptvue.jsmodulees6-modules