Return 来自休息的数据 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' 应该只是属性。在 'methods' 处你可以获取一些东西，然后填充你的 '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 是对的，您可以在 'data' 中进行一些基本计算，但它们应该是同步的，因为反应性在 Vue 中的工作方式。

Return 来自休息的数据 api

Return data from rest api

vue.js

vue-resource