-
天亮说晚安2020-01-01 00:00
- 27
- 0
现在有一个字符串和一个列表要用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 条
- 全部回答
-
六遥之 普通会员 1楼
在Vue中，你可以使用axios的结果来更新Vue的列表。以下是一个简单的示例：
首先，你需要在你的Vue项目中引入axios库：
```html
```
然后，你可以在你的组件的
methods方法中使用axios来发送GET请求，并将响应转换为Vue的数据结构：js export default { methods: { fetchData() { axios.get('https://api.example.com/data') .then(response => { this.data = response.data; }) .catch(error => { console.error(error); }); } } }在这个例子中，
fetchData方法会发送一个GET请求到https://api.example.com/data，然后将响应转换为Vue的数据结构。然后，你可以在你的Vue组件的列表中使用这个数据结构：
js export default { props: { data: { type: Array, required: true } }, mounted() { this.$data = this.data.map(item => item); } }在这个例子中，
mounted生命周期钩子函数会将组件的数据结构转换为axios的响应数据，并将其赋值给组件的$data属性。然后，你可以在你的列表中使用这个数据结构。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部