I trying to do pagination on my webpage. So it will filter the data accordingly on every page is flipped. How can I update my Vue instance's data after every success ajax call? The correct data is passback on each ajax request is made but the Vue data did not update.
code in product.php
(as below):
<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>
code in i.js
(as below):
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();
});
Note: the console.log()
in ajax success function is to show whether the data is changing and correct data is fetch.
example:
//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
but on my product.php
interface, the shown data remain BM23901
instead of updating itself after each successful ajax request is made.
I tried forceUpdate()
from Vue but the instance is still not updating.