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中通过外部方法修改数据实现自动刷新？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2809845.html
