为了账号安全,请及时绑定邮箱和手机立即绑定

如何用axios的结果更新Vue列表?

如何用axios的结果更新Vue列表?

墨色风雨 2019-03-22 19:19:08
现在有一个字符串和一个列表要用axios中取到的结果更新,更新列表的时候有几个本地值要先显示,然后axios取到的结果添加到列表的后面,我研究了大半天,只找到把更新函数全加到created钩子中这么一种方法,请教一下大佬们是否有其他更好的办法来更新数据。<html><head>    <title>index</title>    <meta charset="utf8"></head><body>    <div id="app">        <h1>{{greeting}}</h1>        <ul>            <li v-for="item in items">                {{item}}            </li>        </ul>    </div>    <script src="https://unpkg.com/vue/dist/vue.js"></script>    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>    <script>        let vm = new Vue({            el: '#app',            data() {                return {                    greeting: '',                    items: []                }            },            computed: {            },            methods: {                update_greeting: function () {                    axios.get('https://httpbin.org/ip')                        .then(resp => {                            this.greeting = 'hello'                            console.log('greeting updated')                        })                        .catch(err => console.error(err))                },                update_items: function () {                    this.items = [1, 2, 3]                    axios.get('https://httpbin.org/ip')                        .then(resp => {                            this.items.push(4)                            console.log('items updated')                        })                        .catch(err => console.error(err))                },            },            created: function () {                this.update_greeting()                this.update_items()            }        })    </script></body></html>我还试过一种逗比办法是把初始值放到data中,然后在计算属性中更新data,这样虽然倒是可以更新,但是至少更新两次,而且一不小心就死循环了,想来想去好像除了created钩子外没有什么好办法。请问大佬们在这种情况下都是怎么做的?
查看完整描述

3 回答

?
慕村9548890

TA贡献1884条经验 获得超4个赞

data() {} 中直接给 items 赋值为 [1,2,3] 不就好了?


查看完整回答
反对 回复 2019-04-11
?
侃侃无极

TA贡献2051条经验 获得超10个赞

我也是这样处理的,把执行函数放在created里面,我觉得这种方法还好啊,你可以用async和await,这样效果会更好。可以把请求单独放在一个api文件,然后在引入那两个函数这样方便管理


查看完整回答
反对 回复 2019-04-11
  • 3 回答
  • 0 关注
  • 615 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信