VueJS + Rest API 列表渲染问题答案

【问题标题】：VueJS + Rest API list rendering issueVueJS + Rest API 列表渲染问题
【发布时间】：2016-12-02 15:25:30
【问题描述】：

我有一个 Spring Data Rest 后端，并且在 src/main/resources/static html + js 资产中运行良好。我的问题是我无法理解如何在界面中呈现从 web 服务获取的数据。

如果我将数据显式设置为数组，它可以正常工作（请参阅https://vuejs.org/v2/guide/list.html）。

提前谢谢你！

...
const ListFormsApi = {
  template: '<div><ul><li v-for=\'item in items\'>{{item.details.Title}}</li></ul></div>',
  data: function(){
    return {
      items: ''
    }
  },
  created: function() {
    this.get()
  },
  methods: {
    get: function() {
      axiosInstance.get('/contactTemplate')
        .then(function (response) {
          this.items = response.data._embedded.contactTemplate
        }).catch(function (error) {
          console.log(error)
        }
      );
    }
  }
}
...

从文档示例来看，该网页非常简单明了（假设还存在完整的 html 和 head 标签...

    <body>

    <div id="app">
      <h1><router-link to="/">ContactForm Factory!</router-link></h1>
      <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
        <router-link to="/listForms">List Forms</router-link>
        <router-link to="/listFormsApi">List Forms API</router-link>
      </p>
      <router-view></router-view>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>


    </body>

【问题讨论】：

标签： vue.js

【解决方案1】：

我认为这种情况正在发生，因为这不是您在 axiosInstance 的 then 块中所期望的，您需要进行以下更改才能使其正常工作。

methods: {
  get: function() {
    var self = this
    axiosInstance.get('/contactTemplate')
      .then(function (response) {
        self.items = response.data._embedded.contactTemplate
      }).catch(function (error) {
        console.log(error)
      }
    );
  }

你可以看看我对类似问题的回答here。

【讨论】：

【解决方案2】：

当您注册 .then() 回调时，函数的上下文会发生变化。

为了保留上下文，您可以使用bind 方法。

methods: {
  get: function() {
    axiosInstance.get('/contactTemplate')
      .then(function (response) {
        this.items = response.data._embedded.contactTemplate
      }.bind(this)) // added .bind
      .catch(function (error) {
        console.log(error)
      });
  }
}

【讨论】：

我明天可以试试，saurabh 提出的解决方案按预期工作

【解决方案3】：

vue-resource 现在使用的是response.body 而不是data，所以更新如下：

methods: {
  get: function() {
    axiosInstance
      .get('/contactTemplate')
      .then((response) => {
        this.$set(this.$data, 'items', response.body._embedded.contactTemplate)
      })
      .catch((error) => {
        console.log(error)
      });
  }
}

我还使用箭头语法更正了this 和this.$set 的范围，以确保您设置的数据是反应性的。

如果这仍然没有产生预期的结果，我会确认数据正确地从端点返回。 Vue-resource 有诸如 response.json() 之类的方法可用，例如，如果服务器响应的内容类型不正确。

【讨论】：

我读过一篇文章说 vue-resource 可能会被废弃，所以我决定在这一点上不使用 vue-resource，其余调用通过 axios medium.com/the-vue-point/…