Question

所以我正在使用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

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

Answer 1

问题基本上是我为每次点击创建了一个新的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相应地更新传递给它的数据。

Answer 2

替换它：

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

使用：

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

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

2 个答案: