如何在 Vue 中自动刷新数据？
你遇到的问题是如何通过仅修改 loadDataList 方法来自动刷新页面上的数据列表。
问题根源：
当首次创建 Vue 实例时，它会根据模板渲染页面内容。在这个过程中，它会绑定数据变量到模板元素。如果你直接调用 new Vue() 重新创建实例，那么它将替换现有的 DOM 元素，从而导致数据绑定丢失。
立即学习“前端免费学习笔记（深入）”；
解决方案：
为了避免这个问题，你可以使用 data 属性动态地修改 Vue 实例中的数据，而不是重新创建实例。
var data = [{'title': 'hello1'}, {'title': 'hello2'}];var app = new Vue({ el: '#searchResult', data: { searchResultList: data }});
创建实例后，你可以通过修改 app.searchResultList 来动态更新数据。
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'}]; }};
通过这种方式，你可以仅通过修改 loadDataList 方法来动态更新数据列表，从而实现数据自动刷新。
以上就是Vue 中如何通过只修改 loadDataList 方法自动刷新数据列表？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1556070.html
微信扫一扫 
支付宝扫一扫 
