DOM not updating after data changes in vue.js

Question

so I'm using vue.js to render in the DOM a list of items i'm fetching from a server using an AJAX call and then I loop through a template in my html to print the labels of these items. But the problem is that after successfully fetching the data AND adding it to the array the DOM doesn't update with the new items. Here's the js code :

$(".wrench").click(function () 
{
lastClickedWrench = $(this).attr('id');
console.log("uri :" + lastClickedWrench);
var renderToolbox = new Vue({

    el: "#renderToolbox",
    data: function()
    {
        return {
            listOfStuff: []
        }
        
    },

    mounted: function()
    {
        var vueInstance = this;
        $.ajax({
            type: 'GET',
            url: '/roles/' + lastClickedWrench,

            success: function(responseData)
            {
                for(let i = 0; i<responseData.length; i++)
                {
                    vueInstance.$set(vueInstance.listOfStuff, i, responseData[i].label);
                    //vueInstance.listOfStuff.splice(i, 1, responseData[i])
                }
                //vueInstance.listOfStuff = responseData;
                console.log(vueInstance.listOfStuff);  // this gives me the correct list
            },
            error: function(error)
            {
                console.log('error', error);
                alert("error" + JSON.stringify(error));
            }
        });
    }
    });
});

All the commented out lines are solutions I tried from old stackoverflow posts which don't seem to work for me. Here's the html template :

<div id="renderToolbox">
     <template v-for="item in listOfStuff">
         <li class="dd-item" data-id="null">
            <div class="dd-handle">
                <span> {{item}} </span>
            </div>
          </li>
     </template>
</div>

I also know about the caveat about the v-for directive which is mentioned in the documentation here : https://v2.vuejs.org/v2/guide/list.html#Caveats

I really tried everything, but nothing seems to work. Would appreciate any input on my problem.

@VAMSIKRISHNA I tried vueInstance.$forceUpdate(); it still doesn't update my DOM :/ — Ozerioss Smith
– Ozerioss Smith, Commented Jun 7, 2017 at 13:08
Your code works. Here's a working fiddle that you can compare with to see what's different. jsfiddle.net/yw130euo/1 — thanksd
– thanksd, Commented Jun 7, 2017 at 16:20
The code works yes, but the problem is the DOM not being updated after the data in the list changes, but I actually found the solution and I'll post it down. — Ozerioss Smith
– Ozerioss Smith, Commented Jun 7, 2017 at 17:06

Ozerioss Smith · Accepted Answer · 2017-08-28 08:52:15Z

The problem was basically I created a new Vue for every click. The solution is to simply create the Vue once on document load.

 var renderToolboxVue = new Vue({
    el: "#renderToolbox",

    data:
    {
        listOfSkills: null
    },

    methods:
     {
        fetchData: function()
        {
            var vueInstance = this;
            $.ajax({
                type: 'GET',

                url: '/ascSkill/' + lastClickedWrench + '?company=' + getQueryParam("company") + '&lang=' + getQueryParam("lang"),

                success: function(responseData)
                {
                    vueInstance.listOfSkills = responseData;
                },
                error: function(error)
                {
                    console.log('error', error);
                    alert("error" + JSON.stringify(error));
                }
            });
        }
     }
});

and have the method fetchData() that we created to be called on click like this :

 $('.wrench').click(function()
 { 
     renderToolboxVue.fetchData(); 
 });

This will allow the Vue to update accordingly with the data passed to it.

Michael Mrozek · Accepted Answer · 2018-09-14 02:31:09Z

0

Replace this:

vueInstance.$set(vueInstance.listOfStuff, i, responseData[i].label);

with:

this.listOfStuff.push({i:responseData[i].label})

edited Sep 14, 2018 at 2:31

Michael Mrozek

177k29 gold badges172 silver badges179 bronze badges

answered Jun 7, 2017 at 11:20

Sudhir Pandey

5011 gold badge9 silver badges21 bronze badges

3 Comments

Ozerioss Smith Over a year ago

pushing data to the existing one is not the behavior I need but I tried it anyway and it still didn't update my DOM which is really weird considering in the documentation they say that Vue.js watches for this method and updates.

Sudhir Pandey Over a year ago

codepen.io/mahila_5088/pen/VWvrEP See this link for working code I guess you din included jqerymin.js

Ozerioss Smith Over a year ago

Really thank you for trying to help, but it's like nobody even reads the question. If I didn't add Jquery would the ajax call even work with the code I had ? No. The problem I had was that even though I have the right data ie : in console.log(vueInstance.listOfStuff); and the data changed accordingly, it didn't update in the dom, the DOM. I will post a detailed solution to the problem later.

Collectives™ on Stack Overflow

DOM not updating after data changes in vue.js

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related