如何在Vue中通过外部方法修改数据实现自动刷新？-html教程-PHP中文网

如何在Vue中通过外部方法修改数据实现自动刷新？

聖光之護

发布： 2024-10-25 20:54:47

转载

527人浏览过

如何在vue中通过外部方法修改数据实现自动刷新？

Vue如何通过修改外部方法实现自动刷新数据？

问题背景：

如代码所示，期望通过输入不同数字，点击“搜索”按钮后，页面数据列表能够自动更新。然而，目前无论输入什么数字，列表始终显示“hello1”和“hello2”。

问题解决：

立即学习“前端免费学习笔记（深入）”；

关键在于解决每次点击按钮时Vue实例如何被再次初始化的问题。

先锋多用户商城系统

修改自网上仿乐购商城，新增功能：1、数据库在线备份与导入功能，可以随时备份数据库，数据受损可以导入数据库，确保数据安全；2、增加组合商品概念，可以用于组配商品销售（比如外套有蓝色和红色，鞋子有40码和41码等），买一送一、组合销售（比如上衣＋围巾＋长裙做为一个套装商品）和加价购买等销售方式；3、按照商品重量和送货距离实时计算精确运费，并可在订单中予以显示，使运费金额实现实时动态准确显示、清晰明了；

查看详情

原版代码分析：

原版代码中，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中文网其它相关文章！