The function this.$set is failing to update an array in VueJS

I am facing an issue where the console log shows me the updated array xyz, but when I try to print it in the DOM using {{xyz}}, it does not update. Can anyone shed some light on why this might be happening?

data() {
   return {
      xyz: []
   }
},
methods: {

    getDataFromXML() {

        Array.prototype.forEach.call(this.allxml, path => {

                fs.readFile(xmlLoc, (err, data) => {

                    if (err) throw err;

                    var XmlNode = new DOMParser().parseFromString(data.toString(), 'text/xml')
                    this.$set(this.xyz,path,XmlNode)

                })  

        })

        console.log(this.xyz)

    }
}

Answer №1

It seems like the way you are using set is incorrect. You are mistakenly adding a property directly to the array.

To learn how to correctly use this.$set, check out the explanation I provided in this thread.

I have created an example where one button manipulates the array using set (similar to what you were trying to do), and another button adds an element to the array. You can see the example here.

    <div id="app">

   <h1>Content of array {{ data }}</h1>
   <h1>Array property alpa <span style="color: red">{{ data.alpha }}<span></h1>

    <v-btn @click="set1">manipulate array with $set</v-btn>
    <v-btn @click="set2">add to array with push</v-btn>
</div>

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      data: ['test']
    }
  } ,
  methods: {
    set1() {
      this.$set(this.data, 'alpha', 'xyz')

    },
    set2() {
      this.data.push('xyz')
    }
  }
})

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

Tips for adding a new value to an array of objects in React

As I navigate my way through the world of React as a newcomer, I've encountered a challenge that I need some advice on. I am attempting to add a new key and value to an array of objects, but I'm struggling to accomplish this task. Can anyone prov ...

Using JavaScript to add a class when hovering over an element

I am trying to customize the ul inside one of my li elements in the nav by adding a class when hovered. However, I am encountering an issue where the menu disappears when I try to click on it after hovering over it. I want to achieve this functionality usi ...

The element is inferred to have the 'any' type. No index signature matching the parameter type 'string' was found on the 'User1' type

I have been experimenting with computed properties in TypeScript, but I've encountered a specific issue: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'User1'. ...

Why isn't the hover function working on the table row element?

When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...

I'm having trouble getting Grunt Source Maps to function properly within the foundation-press theme

I'm struggling to enable source maps for the npm package grunt-sass. Here's a snippet from my Gruntfile.js: The issue lies in this line: sourceMap: true, at line 13 module.exports = function(grunt) { var jsApp = [ 'js/app.js' ...

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

I'm currently developing a drag and drop feature for a project, allowing users to add items to a work area and then position them by dragging. I'm facing an issue where I want to create multiple instances of the same element using a key code, but ...

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

Verify and deselect boxes

Can someone help me with checking and unchecking checkboxes? I'm facing a lot of issues with it. You can find my code snippet here: http://jsfiddle.net/N5Swt/: <input type="checkbox" id="checkbox1" /> <span> Check me! </span> // ...

Ways to determine the total number of npm packages installed, excluding development dependencies

Is there a specific NPM command I can run from the CLI to count only the installed NPM Modules in my package that are not Dev Dependencies? When I use npm ls, it lists all packages without distinguishing between regular dependencies and DevDependencies. ...

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

Top Tip for conditionally rendering a styled component inside or outside a wrapper, depending on the screen width

Can anyone help me with this coding question? I'm currently trying to determine the most efficient way to conditionally place the code inside or outside of the wrapper. However, I am unsure what the best practice for this would be. This process seems ...

What is the best way to remove a property from an object in React if the key's value is set to false?

I'm currently working on a form component and I've encountered an issue. Whenever I submit the form, it returns an object with various fields such as email, fieldName1, fieldName2, first_name, last_name, and organization. Some of these fields are ...

Transitioning images in JQuery by using a rollover effect

Is there a way to use Jquery for a hover effect that transitions images with a slide up animation? I've looked everywhere online, but I can't seem to find a code that works. All the examples I've found use fadeIn or fadeOut. Thank you for yo ...

Guidelines for dynamically wrapping the slot in a scoped slot during runtime

I find myself in a rather peculiar situation. <WrapperComponent> <InnerComponent propA="Static"></InnerComponent> </WrapperComponent> The WrapperComponent is responsible for managing all instances of the InnerComponent. ...

Issue with displaying paragraph in Vue Js is resolved, however the checkbox functionality is still not working as expected

Upon mounting, I need to make the same POST API call three times and store the response in vuex. When I display the responses using: {{answer1}} // displayed 2 {{answer2}} // displayed 1 {{answer3}} // displayed 0 However, the checkbox does not wor ...

Troubleshooting issues with Three.js and .obj file shadows

I've been diving into learning Thee.js, and while it's fairly straightforward, I've hit a roadblock with getting shadows to work. Despite setting castShadows, recieveShadows, and shadowMapEnabled to true in the appropriate places, shadows ar ...

When attempting to insert a date into a MySQL database using React.js, I encountered an issue with the date format

Hey everyone, I have set the input date to dd/mm/yyyy format using moment(donors.donateDate).format('DD-MM-YYYY'). However, when I click the submit button, an error is displayed in the console stating: The specified value "23-03-2022" ...

Using VueJS to assign data within a method function

Below is the HTML code that I have written: <div id="myApp"> <div class="items"> <div class="item" v-for="quiz in quizzes" :key="quiz.id"} <span>{{ quiz.question }}</span> <span v-if="selected[quiz. ...

Google Docs integrated with JqueryMobile for seamless document creation and editing

Recently, I experimented with a plugin that allows for viewing pdf documents directly in the browser. While it worked flawlessly on my desktop browser, I encountered some display issues when trying to access it from my mobile device. The document didn&apos ...

Does jQuery UI Layout have compatibility issues with jQuery version 3.3.1?

jQuery UI Layout is compatible with older versions of jQuery, but not with newer versions... Here is a working example: <html> <head> <script src="http://layout.jquery-dev.net/lib/js/jquery-1.4.2.js"></script> <script ...