vue 如何自动刷新数据？

  • Z时代
  • 2024-03-01
  • 分类：IT

vue 如何自动刷新数据？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test auto reload</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="searchDiv">
    <input id="searchIpt" type="text"/>
    <input id="searchBtn" type="button" value="搜索"/>
    <div id="searchResult" v-cloak>
        <ul v-if="searchResultList.length">
            <li v-for="res in searchResultList">
                {{res.title}}
            </li>
        </ul>
        <ul v-else>
            <li>无记录</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var data = [{'title': 'hello1'}, {'title': 'hello2'}];
    loadDataList();
    document.getElementById('searchBtn').onclick = function () {
        if (document.getElementById('searchIpt').value == '1') {console.log(1);
            data = [{'title': 'hello3'}, {'title': 'hello4'}];
            loadDataList();
        } else if (document.getElementById('searchIpt').value == '2') {console.log(2);
            data = [{'title': 'hello5'}, {'title': 'hello6'}];
            loadDataList();
        }
    };
    function loadDataList() {
        var app = new Vue({
            el: '#searchResult',
            data: {
                searchResultList: data
            }
        });
    }
</script>
</body>
</html>

我希望输入框里输入1或者2后，点击搜索按钮页面的数据列表刷新" title="自动刷新">自动刷新，现在的问题是不管我搜1还是2，列表一直展示的是 hello1 hello2 。请大神帮忙看看，谢谢。

通过修改 app.searchResultList 这种方法使数据发生变化的方法我是知道的哦，请大神帮忙看看如何仅修改 loadDataList 这个方法里的代码实现这个需求呢？

回答：

你非要调用loadDataList不行是因为
第一次new Vue({ el: "#searchResult" })，获取到的是模板：

<div id="searchResult">
    <ul v-if="searchResultList.length">
        <li v-for="res in searchResultList">
            {{res.title}}
        </li>
    </ul>
</div>

这个模板内有v-if和v-for有变量searchResultList
但是你第二次点击调用 new Vue({ el: '#searchResult' })时，因为已经渲染内容了，所以获取到的是 <ul><li>hello1</li><li>hello2</li></ul>
这就是为啥不管怎么点击都是hello1，因为根本就没有模板了

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'}];
    }
};

回答：

每次click都执行，也就是重新new Vue，这样不行的。
而且html代码应该都在searchDiv的div里面。

建议先看看vue的教程：https://cn.vuejs.org/v2/guide/

或者百度下vue demo。比如：https://www.runoob.com/vue2/v...

回答：

你基础太薄弱了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test auto reload</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="searchDiv">
    <input id="searchIpt" type="text"/>
    <input id="searchBtn" type="button" value="搜索"/>
    <div id="searchResult" v-cloak>
        <ul v-if="searchResultList.length">
            <li v-for="res in searchResultList">
                {{res.title}}
            </li>
        </ul>
        <ul v-else>
            <li>无记录</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var data = [{'title': 'hello1'}, {'title': 'hello2'}];
    var app = new Vue({
        el: '#searchResult',
        data: {
            searchResultList: data
        }
    });
    async function fetchData(){
        const result = await Promise.resolve([{
            title:Math.random().toString(36)
        },{
            title:Math.random().toString(36)
        },{
            title:Math.random().toString(36)
        }]);
        return result
    }
    async function loadDataList(){
       return await fetchData();
    }
    loadDataList();
    document.getElementById('searchBtn').onclick = async function () {
        if (document.getElementById('searchIpt').value == '1') {console.log(1);
            app.searchResultList = await loadDataList();
        } else if (document.getElementById('searchIpt').value == '2') {console.log(2);
            app.searchResultList = await loadDataList();
        }
    };
</script>
</body>
</html>

以上是 vue 如何自动刷新数据？ 的全部内容， 来源链接： utcz.com/p/937513.html

回到顶部