Vue.js VueJS+；RESTAPI列表呈现问题_Vue.js

Vue.js VueJS+；RESTAPI列表呈现问题

vue.js

Vue.js VueJS+；RESTAPI列表呈现问题,vue.js,Vue.js,我有一个SpringDataREST后端，在src/main/resources/staticHTML+js资产中运行良好。我的问题是我无法理解如何在接口中呈现从webservice获取的数据如果我显式地将数据设置为数组，它可以正常工作（请参阅）提前谢谢你 ... const ListFormsApi = { template: '<div><ul><li v-for=\'item in items\'>{{item.details.Title}}&l

我有一个SpringDataREST后端，在src/main/resources/staticHTML+js资产中运行良好。我的问题是我无法理解如何在接口中呈现从webservice获取的数据

如果我显式地将数据设置为数组，它可以正常工作（请参阅）

提前谢谢你

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

。。。
常量ListFormsApi={
模板：“{{item.details.Title}”，
数据：函数（）{
返回{
项目：“”
}
},
已创建：函数（）{
这个
},
方法：{
get:function（）{
axiosInstance.get（“/contactTemplate”）
.然后（功能（响应）{
this.items=response.data.\u embedded.contactTemplate
}).catch（函数（错误）{
console.log（错误）
}
);
}
}
}
...

从文档示例来看，该网页非常简单明了（假设还存在完整的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>


联系工厂！

去福
去酒吧
列表表格
列表表单API

为了保持上下文，可以使用

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

vue资源现在使用的是

response.body

而不是

数据

，因此请按如下方式更新：

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资源有

response.json（）等方法

例如，如果服务器响应的内容类型不正确，则可用。

我认为发生这种情况是因为这一范围不是

中所期望的范围，然后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)
      }
    );
  }

您可以看看我对类似问题的回答。
我读过一篇文章，说vue资源可能会被放弃，所以我决定现在不使用vue资源，rest调用是通过axios完成的。我可以明天再试试，saurabh提出的解决方案如预期效果