Vue.js更新data属性变量中的ajax数据

时间:2017-05-25 04:56:58

标签: javascript ajax vue.js

我是Vue.js的新手。我想更新ajax数据中的数据。

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

我想从ajax数据中获取{{ name }}变量。
这是我的js代码

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

我的ajax name属性位于this.resp.name

更新

这是我的ajax响应数据格式

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

1 个答案:

答案 0 :(得分:2)

在下面的回调中添加额外的行。

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

在您的数据中,只需将其初始化为null。

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

或者你可以使用

{{resp.name}}

在你的模板中。