CODEWITHSUNDEEP
apivue.jsrequestrender
jeanm
jeanm

Reputation: 1273

How to show data in a VueJS app through request?

I've done this to try to render data in a page using Vue.js, but it doesn't work.

Error from console: "Property or method 'PROPERTY_NAME' is not defined on the instance but referenced during render."

*The "get" function comes from a Fetch API which is being used in the project. Didn't want to add AXIOS, the recommended way by Vue.

var app6 = new Vue({
  el: "#my-id",
  data: null,
  mounted: function() {
    get('http://www.mocky.io/v2/5c7fd404330000c6378483fe')
    .then(function(response){
      this.data = response;
      console.log('success');
    }).catch(function(){
      console.log('error');
    });
  }
});

(if I put the object directly on "data", it works fine, but it needs to come from an external API)

var app6 = new Vue({
  el: "#detalle-equipos",
  data: {
    "producttitle": "iPhone XR",
    "productcolor": "red",
    "productcapacity": "64GB",
    "slides": [
      {
        "src":"../../assets/resources/images/smartphone1.jpg",
        "alt":"smartphone 1",
      },
      {
        "src":"../../assets/resources/images/smartphone2.jpg",
        "alt":"smartphone 2",
      },
      {
        "src":"../../assets/resources/images/smartphone3.jpg",
        "alt":"smartphone 3",
      },
      {
        "src":"../../assets/resources/images/smartphone4.jpg",
        "alt":"smartphone 4",
      },
    ]
  },
  mounted: function() {
    get('http://www.mocky.io/v2/5c7fd404330000c6378483fe')
    .then(function(response){
      this.data = response
      console.log('success')
    }).catch(function(){
      console.log('error')
    });
  }
});

Well, help...

Upvotes: 0

Views: 275

Answers (1)

ittus
ittus

Reputation: 22403

this in then block is not Vue instance. You can use arrow function

mounted: function() {
  get('http://www.mocky.io/v2/5c7fd404330000c6378483fe')
  .then((response) => {
    this.slides = response.ATTslides
    this.producttitle = response.ATTproducttitle

  }).catch(function(){
    console.log('error')
  });
}

Upvotes: 3

Related Questions