如何实现 Vue 中数据的自动刷新？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何实现 Vue 中数据的自动刷新？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

Vue 实现数据自动刷新

想要在 Vue 中实现数据自动刷新，需要将修改数据的操作从 loadDataList 方法中移出。这是因为 new Vue() 方法在首次创建时会获取模板，而后续调用不会再获取模板，只会获取渲染后的内容。

为了解决这个问题，可以使用 Vue 的数据绑定特性。当 searchResultList 数据改变时，Vue 会自动更新视图。

修改后的代码如下：

var data = [{'title': 'hello1'}, {'title': 'hello2'}];
var app = new Vue({
    el: '#searchResult',
    data: {
        searchResultList: data
    }
});

document.getElementById('searchBtn').onclick = function () {
    if (document.getElementById('searchIpt').value == '1') {
        console.log(1);
        app.searchResultList = [{'title': 'hello3'}, {'title': 'hello4'}];
    } else if (document.getElementById('searchIpt').value == '2') {
        console.log(2);
        app.searchResultList = [{'title': 'hello5'}, {'title': 'hello6'}];
    }
};

修改后的代码中，当点击搜索按钮时，会直接修改 searchResultList 数据，从而触发 Vue 的数据绑定，实现数据的自动刷新。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。