如何用axios的结果更新Vue列表？
现在有一个字符串和一个列表要用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
data() {} 中直接给 items 赋值为 [1,2,3] 不就好了？ -
侃侃无极
我也是这样处理的，把执行函数放在created里面，我觉得这种方法还好啊，你可以用async和await，这样效果会更好。可以把请求单独放在一个api文件，然后在引入那两个函数这样方便管理
随时随地看视频慕课网APP
相关分类
JavaScript