Vuejs 不呈现来自 ajax 的数据 [英] Vuejs does not render data from ajax

问题描述

我使用 jQuery ajax 请求 api 并获得响应，但无法呈现数据.有人知道如何解决这个问题吗?

 var app = new Vue({//路由器，数据: {人:空},创建:函数(){$.ajax({网址:'test.php'，}).完成(功能(资源){控制台日志(res)；this.people = JSON.parse(res);//console.log('124234234523');//console.log(this.people.name);});}}).$mount('#app');

 
<ol><li v-for="person in people">{{ 人名}}</ol>

代码使用 vue 路由器:当我使用Vue路由器时，即使我使用箭头功能.Vue 无法渲染模板.我是否误用了Vue路由器?

//列出人物组件var PeopleListing = Vue.extend({模板:'#people-listing-template',数据:函数(){返回 {人:this.$parent.people}}});//创建路由器var 路由器 = 新的 VueRouter({模式:'哈希'，基础:window.location.href，路线:[{path: '#/', 组件: PeopleListing},{名称:'人'，路径:'/:id'，组件:PersonDetail }]});var app = new Vue({路由器，数据: {人:空},创建:函数(){$.ajax({网址:'test.php'，}).done((res) =>{//console.log(res);this.people = JSON.parse(res);//console.log('124234234523');//console.log(this.people.name);});}}).$mount('#app');

<router-view class="view"></router-view>
<模板 id="people-listing-template"><ul><li v-for="person in people">{{ 人名}}<router-link :to="{ name: 'person', params: { id: person.guid }}">查看详情</router-link></template>

解决方案

这个范围是创建问题，使用如下箭头函数:

var app = new Vue({//路由器，数据: {人:空},创建:函数(){$.ajax({网址:'test.php'，}).done((res) => {控制台日志(res)；this.people = JSON.parse(res);//console.log('124234234523');//console.log(this.people.name);});}}).$mount('#app');

您可以在此处获取有关此问题的更多详细信息.

I use jQuery ajax to request api and get the respone, but the data cannot be rendered. Does someone know how to fix this problem?

   var app = new Vue({
     //router,
     data: {
      people: null
     },
     created: function() {
      $.ajax({
        url: 'test.php',			
      }).done(function(res){
        console.log(res);
        this.people = JSON.parse(res);
        //console.log('124234234523');
        //console.log(this.people.name);
      });
     }
    }).$mount('#app');

    <div id="app">
      <ol>
        <li v-for="person in people">
          {{ person.name }}
        </li>
      </ol>
    </div>

      
 

Code use vue router: While I use Vue router, even I use arrow function. The template cannot be render by Vue. Whether do I misuse Vue router?

// Listing people component
var PeopleListing = Vue.extend({
  template: '#people-listing-template',
  data: function() {
      return {
        people: this.$parent.people
    }
  }
});


// Create the router
var router = new VueRouter({
	mode: 'hash',
	base: window.location.href,
	routes: [
      {path: '#/', component: PeopleListing},
      {name: 'person', path: '/:id', component: PersonDetail }
    ]
});




var app = new Vue({
    router,
	data: {
		people: null
	},
	created: function() {
		
		$.ajax({
			url: 'test.php',			
		}).done((res) =>{
			//console.log(res);
			this.people = JSON.parse(res);
			//console.log('124234234523');
			//console.log(this.people.name);
		});
	}
}).$mount('#app');

<div id="app">
	<router-view class="view"></router-view>
</div>
  
  <template id="people-listing-template">
    <ul>
		
      <li v-for="person in people">
        {{ person.name }} 
        <router-link :to="{ name: 'person', params: { id: person.guid }}">View Details</router-link>
      </li>
    </ul>
  </template>

解决方案

Scope of this is creating issue, use arrow function like following:

var app = new Vue({
 //router,
 data: {
  people: null
 },
 created: function() {
  $.ajax({
    url: 'test.php',            
  }).done((res) => {
    console.log(res);
    this.people = JSON.parse(res);
    //console.log('124234234523');
    //console.log(this.people.name);
  });
 }
}).$mount('#app');

You can get more details about this issue here.

这篇关于Vuejs 不呈现来自 ajax 的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！