从rest api返回数据

debugcn 发表于 Dev

用户672009

我正在尝试从 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>

有人知道我做错了什么吗？

埃戈尔·斯坦巴基奥

“数据”应该只是属性。您可以通过“方法”获取某些内容，然后填充“数据”属性。

正确的代码如下所示：

<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 中反应性的工作方式，它们应该是同步的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。