从其余api返回数据

Question

我试图从其余api中获取一些数据。但是，结果this.someData仍然未定义。

我的成分如下

<template> 
    <div class="list"> 
    <h1>List</h1> 
    <pre>msg: {{msg}}</pre> 
    </div> 
</template> 

<script> 
    import Vue from 'vue' 
    import VueResource from 'vue-resource' 
    Vue.use(VueResource) 

    export default { 
    name: 'list', 
    data() { 
     this.$http.get('http://localhost:8080/api/posts/filter?username=tons').then(response => { 
     // get body data 
     this.someData = response.body 
     console.log(this.someData) 
     }, response => { 
     // error callback 
     }) 

     return { 
     msg: this.someData + 'somedata' 
     } 
    } 
    } 
</script> 

任何人有一个关于我做错了什么线索？

Answer 1

'data'应该只是属性。有'方法'您可以获取某些内容，然后填充您的'数据'属性。

正确的代码看起来是这样的：

<script> 
    export default { 
     data: function() { 
      return { 
       someData: null 
      } 
     }, 
     methods: { 
      getData: function() { 
       // fetch here 
       this.someData = response.body; 
      } 
     }, 
     mounted() { 
      this.getData(); // or trigger by click or smth else 
     } 
    } 
</script> 

在您的模板，你可以再{{ someData }}

@Bert_Evans是正确的，你可以做一些基本的计算中的“数据”，但他们应该syncronous ，因为反应性在Vue中起作用。