Vue如何通过修改外部方法实现自动刷新数据？
问题背景：
如代码所示，期望通过输入不同数字，点击“搜索”按钮后，页面数据列表能够自动更新。然而，目前无论输入什么数字，列表始终显示“hello1”和“hello2”。
问题解决：
立即学习“前端免费学习笔记（深入）”；
关键在于解决每次点击按钮时Vue实例如何被再次初始化的问题。
原版代码分析：
原版代码中，loadDataList函数内存在的问题是，它每次都会重新创建一个新的Vue实例，并且在第二次点击时，由于模板内容已被渲染为静态HTML，Vue实例将无法再响应数据变化。
因此，正确的做法是避免重新创建Vue实例，而是直接修改已创建实例的data数据。
修改方案：
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'}];
}
};在修改后的方案中，我们直接修改app实例的searchResultList数据，从而触发Vue响应式系统更新视图。这样，无论用户输入什么数字，点击“搜索”按钮后，列表数据都能正确更新。
以上就是如何在Vue中通过外部方法修改数据实现自动刷新？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
998
