感谢Bert的评论

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数组中时我得到了

未捕获（承诺）TypeError：无法设置属性'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;
    });
}

How to access the correct this inside a callback? 有很多种方式。你可以在这里找到很多方法。

感谢Bert的评论

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>

未捕获（在承诺中）TypeError：无法使用axios设置undefined的属性

2 个答案:

感谢Bert的评论