VueJS + Rest API list rendering issue

Question

I have a Spring Data Rest backend and in src/main/resources/static html + js assets which work fine. My issue is that I can't understand how to render the data picked up from the webservice in the interface.

In case I set the data explicitly as an array, it works fine (see https://v2.vuejs.org/v2/guide/list.html).

Thank you in advance!

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

The webpage is quite simple and straightforward from documentation examples (assume that complete html and head tags are present as well...

    <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>

score 4 · Accepted Answer · edited May 23 '17 at 12:09

I think this is happening because scope of this is not what you are expecting inside the then block of axiosInstance, you need to make following change to make it work.

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

You can have a look at my answer on the similar problem here.

score 1 · Answer 2 · answered Dec 02 '16 at 16:10

1

When you are registering the .then() callback the context of the function changes.

In order to keep the context you can use the bind method.

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

answered Dec 02 '16 at 16:10

Mihai Vilcu

1,947
18
24

i could try it tomorrow, the solution proposed by saurabh worked as expected – cristi _b Dec 02 '16 at 23:21

score 1 · Answer 3 · answered Dec 02 '16 at 16:39

vue-resource is now using response.body rather than data so look to update as follows:

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

I've also used arrow syntax to correct the scope of this and this.$set to ensure the data that you set is reactive.

If this still doesn't produce the desired result I'd confirm the data is correctly returning from the endpoint. Vue-resource has methods such as response.json() available if for instance the server responds with an incorrect content-type.

I have read an article that vue-resource might be abandoned per-say so I decided not to use vue-resource at this point, rest calls are done via axios https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.s2rc283t0 — cristi _b, Dec 02 '16 at 23:18

VueJS + Rest API list rendering issue

3 Answers3