Question

我试图在我的网页上进行分页。因此，它将在每页翻转时相应地过滤数据。每次成功执行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();
});

注意：ajax成功函数中的console.log()用于显示数据是否正在更改以及是否获取了正确的数据。

示例：

//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()，但实例仍未更新。

Answer 1

我认为您应该改用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

Ajax调用后VueJS更新数据

1 个答案: