vue 如何自动刷新数据?

小七哥
  • 239

代码如下:

<!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后,点击搜索按钮页面的数据列表自动刷新,现在的问题是不管我搜1还是2,列表一直展示的是 hello1 hello2 。请大神帮忙看看,谢谢。

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

回复
阅读 1.8k
3 个回答

你非要调用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-ifv-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'}];
    }
};

你基础太薄弱了

<!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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏