current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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://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/[email protected]/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>


    </body>
share|improve this question
up vote 4 down vote accepted

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.

share|improve this answer
    
you was right on the money, thank you! – cristi _b Dec 2 '16 at 23:20
up vote 1 down vote

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)
      });
  }
}
share|improve this answer
    
i could try it tomorrow, the solution proposed by saurabh worked as expected – cristi _b Dec 2 '16 at 23:21
up vote 1 down vote

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.

share|improve this answer
    
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 medium.com/the-vue-point/… – cristi _b Dec 2 '16 at 23:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.