VueJS обновляет данные после вызова ajax

Question

Я пытаюсь сделать нумерацию страниц на своей веб-странице.Таким образом, он будет фильтровать данные соответственно на каждой странице.Как я могу обновить данные своего экземпляра Vue после каждого успешного вызова ajax?Правильные данные - это передача при каждом запросе 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.

Я пытался forceUpdate() из Vue, но экземпляр все еще необновление.

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 внутри функции стрелки