如何实现 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 的数据绑定，实现数据的自动刷新。

以上就是如何实现 Vue 中数据的自动刷新？的详细内容，更多请关注其它相关文章！