Question

我有一个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>

Answer 1

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

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的答案。

Answer 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)
      });
  }
}

Answer 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()等方法。

VueJS + Rest API列表呈现问题

3 个答案: