问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 如何自动刷新数据？

头像
小七哥
    404285179

    代码如下：

    <!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 这个方法里的代码实现这个需求呢？

    javascript前端vue.jshtmlhtml5
    阅读 6.1k
    3 个回答
    得票最新
    头像
    李十三
      13.6k31929
      ✓ 已被采纳

      你非要调用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'}];
    }
};
      头像
      simonbaker
        25614
        头像
        手机用户2117
          2185

          你基础太薄弱了

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