Vue.js update ajax data in data property variable

Question

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

what data you have response.body? show us data format

Dinesh undefined
– Dinesh undefined

2017-05-25 05:04:26 +00:00
Commented May 25, 2017 at 5:04 — Dinesh undefined
– Dinesh undefined, Commented May 25, 2017 at 5:04
I have update the data format

alien
– alien

2017-05-25 05:09:43 +00:00
Commented May 25, 2017 at 5:09 — alien
– alien, Commented May 25, 2017 at 5:09

Bert · Accepted Answer · 2017-05-25 05:10:30Z

2

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.

answered May 25, 2017 at 5:10

Bert

82.6k17 gold badges204 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js update ajax data in data property variable

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related