CODEWITHSUNDEEP
javascriptajaxvue.js
alien
alien

Reputation: 214

Vue.js update ajax data in data property variable

I am new in Vue.js. I want to update data from ajax data.

<template>
  <span class="label_cont">This is to certify that</span> {{ name }}
</template>

I want to {{ name }} variable from ajax data.
Here is my js code

export default{
  created(){
    const url = 'app/result.php';
    this.$http.get(url).then(response => {
      this.resp = response.body;
    });
  },
  data(){  
    return {
     resp:[],
     name: resp.name,
   }
  }
}

In my ajax name property is in this.resp.name

Update:

Here is my ajax response data format

{
  "name": "X",
  "class": "Y",
  "roll": "Z"
}

Upvotes: 0

Views: 572

Answers (1)

Bert
Bert

Reputation: 82439

Add the extra line to your callback below.

this.$http.get(url).then(response => {
  this.resp = response.body;
  this.name = response.name
});

In your data just initialize it to null.

data(){  
  return {
    resp:[],
    name: null,
  }
}

Alternatively you could just use 

{{resp.name}}

in your template.

Upvotes: 2

Related Questions