在外部Ajax调用之后更新Vue

Question

我正在发现Vuejs，我正在尝试使用Ajax调用更新当前数据但没有成功。

HTML：

BeautifulSoup(markup, "xml")

JS：

<div id ="app">
    {{first_name}} {{last_name}}
</div>

我想用按钮触发的Ajax调用进行刷新：

var my_data = {first_name : 'foo', last_name:'bar'}

var vm = new Vue({
     el: "#app",
     data : my_data
     })

在控制台中，my_data显示新值但对HTML没有影响。

Answer 1

你不应该使用jQuery点击处理程序，但这不是你的问题。

此：

{var my_data = json}

只是赋值给局部变量。它的生命完全在那些花括号内，所以你在那里什么都没有。您正在尝试替换Vue中的整个数据项，这不能通过简单的分配来完成。但是你可以复制这些作品：

{
    for (const key of Object.keys(json)) {
        vm[key] = json[key];
    }
}

假设vm在您设置jQuery点击处理程序的范围内，那应该适合您。如果您的var my_data也在范围内，您也可以使用它：

{ Object.assign(my_data, json) }

请注意我没有将my_data作为局部变量。但是，您不能只分配给my_data，因为它会替换该对象，因此它不再引用vm的{​​{1}}。