如何用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钩子外没有什么好办法。请问大佬们在这种情况下都是怎么做的？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
data() {}中直接给items赋值为[1,2,3]不就好了？我也是这样处理的，把执行函数放在created里面，我觉得这种方法还好啊，你可以用async和await，这样效果会更好。可以把请求单独放在一个api文件，然后在引入那两个函数这样方便管理
为什么要说把值放到data里很逗比呢，原本就应该这么初始化。