使用axios修改vue.js中的数据变量
使用axios修改vue.js中的数据变量
提问于 2017-10-23 14:49:17
这是我的剧本：
<html>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js"></script>
<body>
<div id="app-3">
<span v-if="seen">{{ textFromApi }}</span>
</div>
<br/>
<script type="text/javascript">
var app3 = new Vue({
el: '#app-3',
data: {
seen: true,
textFromApi: "hello"
},
methods: {
getData() {
return axios.get('https://jsonplaceholder.typicode.com/posts/1')
},
},
created: function () {
this.textFromApi = this.getData();
}
})
</script>
</body>
</html>我试图从这个api：this.textFromApi的调用中修改https://jsonplaceholder.typicode.com/posts/1
但我的this.textFromApi似乎没有更新，有什么想法吗？
下面是一个小提琴代码：https://jsfiddle.net/bussiere/5t3v013o/
编辑自下面的评论
问候和感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-23 14:53:06
创建()是一个生命周期钩，它应该在与数据、方法、计算等相同的层次上。而不是方法的子级(因此，如果在method()中嵌套创建的()，它将永远不会被执行，除非您调用该方法)。
您也不会按照axios的承诺做任何事情，您应该使用then ()处理它。
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js"></script>
<body>
<div id="app-3">
<span v-if="seen">{{ textFromApi }}</span>
</div>
<br/>
<script type="text/javascript">
var app3 = new Vue({
el: '#app-3',
data () {
return {
seen: true,
textFromApi: { title: 'empty'}
}
},
methods: {
getData() {
return axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
this.textFromApi = response.data
})
},
},
created: function () {
this.getData();
}
})
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46892304
复制相关文章
相似问题
腾讯云开发者
