时间戳

首页 > 解决方案 > ajax调用后VueJS更新数据

php - ajax调用后VueJS更新数据

问题描述

我试图在我的网页上进行分页。所以它会在每一页被翻转时相应地过滤数据。每次成功的 ajax 调用后如何更新我的 Vue 实例的数据？每次发出 ajax 请求时都会回传正确的数据，但 Vue 数据没有更新。

代码product.php（如下）：

<script src="/vue.min.js"></script>
<script src="/i.js"></script>

<div class="content">
 <table class="hue">
  <thead>
    //table headings
  </thead>
  <tbody>
   <tr v-for="(value, key) in result">
     <td>{{value.productCode}}</td>
     <td>{{value.productName}}</td>
     //... etc
   </tr>
  </tbody>
 </table>
</div>

代码i.js（如下）：

function fetchData(p=null){
 var ajaxVue = new Vue({
  el: ".hue > tbody",
  data: {
    result: []
  },
  mounted: function(){
   var self = this;
   $.ajax({
    url:"/a.php",
    method:"GET",
    data:{
     page: p
    },
    dataType:"json",
    success:function(rs){
     console.log(rs.pd[14].code);
     self.result = rs.pd;
     $('#pagination > .pagination').html(rs.pgnt);
     //ajaxVue.$forceUpdate();

    },
    error:function(err){console.log(err);}
   });
  }
 });
}

$(document).ready(function(){
  fetchData();
});

注意：console.log()在ajax中成功的功能是显示数据是否在变化，是否获取到正确的数据。

例子：

//there will be 15 data on each request, i just show one for example.
BM23901 //current page: 1
BM19023 //current page: 2
BM39020 //current page: 3

但是在我的product.php界面上，显示的数据BM23901在每次成功的 ajax 请求发出后仍然存在而不是更新自身。

我从 Vue 尝试过forceUpdate()，但实例仍未更新。

标签： phpajaxvue.js

解决方案

我认为您应该改用 axios ：

try {
    const response = await axios({...});
    console.log(rs.pd[14].code);
    self.result = rs.pd;
} catch (error) {
    console.log(error);
}

我认为这段代码会完美运行。但是如果你仍然想用 ajax 来尝试，那么我可能会建议将你的成功函数更改为箭头函数：

$.ajax({
    ...
    success: (resp) => {
        result = resp.pd;
    },
    ...
});

请注意，我不必使用self内部箭头功能

推荐阅读