在vue.js中更改数据后,DOM不会更新

时间:2017-06-07 09:50:38

标签: ajax dom vuejs2

所以我正在使用vue.js在DOM中呈现我正在使用AJAX调用从服务器获取的项目列表,然后我在html中循环浏览模板以打印这些项目的标签。但问题是,在成功获取数据并将其添加到数组后,DOM不会使用新项目进行更新。这是js代码:

$(".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));
            }
        });
    }
    });
});

所有注释掉的行都是我尝试过的旧stackoverflow帖子的解决方案,这些帖子似乎对我不起作用。 这是html模板:

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

我也知道有关v-for指令的警告,该指令在此处的文档中提到:https://vuejs.org/v2/guide/list.html#Caveats

我真的尝试了一切,但似乎没有任何效果。非常感谢我的问题。

2 个答案:

答案 0 :(得分:2)

问题基本上是我为每次点击创建了一个新的Vue。解决方案是在文档加载时简单地创建一次Vue。

 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));
                }
            });
        }
     }
});

并让我们创建的方法fetchData()在点击时调用:

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

这将允许Vue相应地更新传递给它的数据。

答案 1 :(得分:0)

替换它:

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

使用:

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