【问题标题】:Vuejs does not render data from ajaxVuejs 不会从 ajax 渲染数据
【发布时间】:2023-11-09 05:36:01
【问题描述】:

我使用jQuery ajax 请求api 并获取响应,但是无法渲染数据。有人知道如何解决这个问题吗?

   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>

      
 

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

// 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>

【问题讨论】:

    标签: vuejs2


    【解决方案1】:

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

    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');
    

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

    【讨论】:

    • 非常感谢您的帮助。但它不起作用,如果我使用
    • @user39291 你能用template和vue路由器添加代码吗?