ajax调用后VueJS更新数据

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