这是我的脚本:
<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 似乎没有更新，有什么想法吗？
这是一个 fiddle 代码: https://jsfiddle.net/bussiere/5t3v013o/
根据下面的评论进行编辑
问候和感谢
最佳答案
created()是 lifecycle hook ，它应该与数据、方法、计算等处于同一级别。不是方法的子级(因此，如果您将created()嵌套在methods()中，除非您调用该方法，否则它永远不会被执行)。
您也不要对 axios Promise 执行任何操作，您应该使用 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>
关于javascript - 使用 axios 修改 vue.js 中的数据变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46892304/