从rest api返回数据

Question

我正在尝试从 rest 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 是对的，您可以在“数据”中进行一些基本计算，但它们应该是同步的，因为 Vue 中反应性的工作方式。