未捕获(在承诺中)类型错误:无法使用 axios 设置未定义的属性

Question

我有这个 vue.js 组件，它使用 axios 来检索joke对象的 json 数组：

<template>
<div id="show-jokes-all">
<h2>Showing all jokes</h2>
<div v-for="joke in jokes">
<h2>{{joke.title}}</h2>
<article>{{joke.body}}</article>
<hr>
</div>  
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'showJokes',
data () {
return {
jokes:[]
}
},
methods: {
},
created() {
axios.get('http://127.0.0.1:8090/api/jokes).then(function(data){    
//console.log(data); works fine
this.jokes = data.body;
});
}
}
</script>

当我在控制台中记录结果时，这很好，但是当我尝试将其放入数组jokes我得到

未捕获(在承诺中(类型错误：无法设置属性"笑话" 定义

这可能是一个微不足道的错误，但作为 vue 的新手.js我对此很感兴趣，所以感谢您的提示。

Answer 1

你脱离了this上下文。您应该this上下文存储在变量上。

created() {
let self = this
axios.get('http://127.0.0.1:8090/api/jokes').then(function(data){    
//console.log(data); works fine
self.jokes = data.body;
});
}

如何在回调中访问正确的this中有很多方法？ .您可以参考此处以获取多种方式。

感谢伯特的评论

Answer 2

是的，你可以使用 ES6 .

<template>
<div id="show-jokes-all">
<h2>Showing all jokes</h2>
<div v-for="joke in jokes">
<h2>{{joke.title}}</h2>
<article>{{joke.body}}</article>
<hr>
</div>  
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'showJokes',
data () {
return {
jokes:[]
}
},
methods: {
},
created() {
axios.get('http://127.0.0.1:8090/api/jokes').then((data) => {    
// console.log(data); // works fine
this.jokes = data.body;
});
}
}
</script>