现在有一个字符串和一个列表要用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钩子外没有什么好办法。请问大佬们在这种情况下都是怎么做的?
添加回答
举报
0/150
提交
取消