I have a function which I am calling whenever a file is uploaded in order to refresh my table which holds the files.
The response.data is coming back with the correct data but my table is not reflecting it. Any idea what I could do in order to force update my table to show the new entries?
If I refresh the page, the data comes back correct.
function GetFileList(intID) {
//$("#fileuploadstbl").empty();
var ItemsVue = new Vue({
el: '#fileUploadContent',
data: {
items: []
},
mounted: function () {
var self = this;
axios.get("getUploads.ashx")
.then(response => {
self.items = response.data
}, function (err) {
console.log('error');
console.log(err.status);
console.log(err.response.status);
})
.catch(err => {
console.log('error');
console.log(err.status);
});
}
});
$("#fileUploadContent").show();
}
And this is how I bind my <tr>:
<tr
v-for="item in items" class="tddata"
v-bind:data-ID="item.ID"
v-bind:data-Uploadid="item.Uploadid"
>
<td>{{item.Filename}}</td>
<td
style="cursor: pointer;text-align:center;"
v-on:click="ViewFile(item.Filepath,item.Filename)"
>
View File
</td>
<td
style="cursor: pointer;text-align:center;"
v-on:click="DeleteFile(item.ID,item.guid,item.Filepath,item.Filename)"
>
View File
</td>
<td style="text-align:center;">{{item.UploadedBy}}</td>
</tr>
It will automatically update for your case. Maybe you can check is your response.data save in your "items". If still cannot, maybe try to use the forceupdate function
this.$forceUpdate();
This works for me
//HTML
<tr v-for="user in users" :key="user.id" v-bind="users_model">
//In your method
axios.get('sample-domain..com').then(response => {
this.users = response.data.data
this.users_model++
})
Related
My goal is to store a specific data in the localStorage when I click on a link
but log i get is either undefined or absolutely nothing.
<li v-for="(categorie, index) in categories" :key="index">
<a href="./currentCategory" #click.prevent="getCategory()">
<img class="categorie-img" :src="categorie.strCategoryThumb" >
<p>{{ categorie.strCategory }}</p>
</a>
</li>
data() {
return {
categories: []
}
},
methods: {
getAllCategories() {
axios
.get('https://www.themealdb.com/api/json/v1/1/categories.php')
.then((response) => {
console.log( response.data);
this.categories = response.data.categories;
}).catch(error => {
console.log(error);
alert("api can't be reached");
})
},
getCategory() {
localStorage.setItem('currentCategory', this.categorie.strCategory );
}
},
I am using this API https://www.themealdb.com/api/json/v1/1/categories.php
I guess this.categorie.strCategory is incorrect but i really cant figure it out
I also tried this.categories.strCategory
Try to pass category
#click.prevent="getCategory(categorie)
then save it
getCategory(cat) {
localStorage.setItem('currentCategory', cat );
}
Found the answer thanks to #Nikola Pavicevic
had to pass a category to the click event
#click.prevent="getCategory(categorie.strCategory)
and pass it to the function
getCategory(cat) {
localStorage.setItem('currentCategory', cat);
}
I referred to this link. It's the same way as mine.
Vuejs Ajax call and dataTable
(I'm using Vuejs and dataTable for one of my project. I make an Ajax call and push data into an array. After that I use v-for to loop the data in the tag.)
After creating Datatable, the table is displayed normally.
The problem is that v-for does not run normally when the list value in the data of vuejs changes.
The data expressed in v-for does not normally apply to html even if the statusList[] value changes!
js)
var tbapplyListApp = new Vue({
el: "#tbapplyList",
data: {
statusList: []
},
methods: {
getComregstList: function() {
var $this = this;
AjaxUtil.post({
url: GblVar.apiUrl + "/api/admin/regst/getRegstList",
param: {
...
},
reqType: "json",
success: function(res) {
console.log("----getComregstList");
$this.statusList = res.data;
},
finally: function(){
console.log("-----statusList changed!");
console.log($this.statusList);
$('#tbapplyListTable').DataTable().destroy();
$('#tbapplyListTable').DataTable( {
dom: 'Bfrtipl',
buttons: [
{
extend: 'excel',
text: 'DOWNLOAD'
}
]
});
}
});
},
},
mounted: function() {
this.getComregstList();
},
});
html)
<table id="tbapplyListTable" class="display">
<colgroup>
<col width="16%"/>
<col width="17%"/>
<col width="17%"/>
<col width="17%"/>
<col width="17%"/>
<col width="16%"/>
</colgroup>
<thead>
<tr>
<th>no</th>
<th>regstName</th>
<th>regstDt</th>
<th>regstStepName</th>
<th>mngName</th>
<th>confmTagStr</th>
</tr>
</thead>
<tbody>
<tr v-for="(status, index) in statusList" v-key="status.regstSeq" class="status_list">
<td v-text="statusList.length-index"></td>
<td v-text="status.regstName"></td>
<td v-text="status.regstDt"></td>
<td v-text="status.regstStepName"></td>
<td v-text="status.mngName"></td>
<td v-text="status.confmTagStr"></td>
</tr>
</tbody>
</table>
And AjaxUtil.post appears to be clear. (I'm calling the API normally and I'm importing data normally)
It would be great if I could get some help!
I changed the location and solved it.
success: function(res) {
$('#tbapplyListTable').DataTable().destroy();
$this.statusList = res.data;
},
finally: function(){
$('#tbapplyListTable').DataTable( {
...
I already installed dataTables using npm i dataTables --save, and now I can see the dataTable format in my vue component, the problem is the searchbar,paginations are not working well. See my screenshot
code in my component
<table class="table table-hover" id="myTable">
<thead>
<tr>
<th>Room Name</th>
<th>Building</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="room in roomsData" :key="room.id">
<td>{{room.room_desc}}</td>
<td>{{room.bldg}}</td>
<td>
<a href="#" data-toggle="modal" data-target="#exampleModal" #click="editModal(room)">
<i class="fa fa-edit"></i>
</a>
<a href="#" #click="deleteRoom(room.id)">
<i class="fa fa-trash text-red"></i>
</a>
</td>
</tr>
</tbody>
</table>
Methods
myTable(){
$(document).ready( function () {
$('#myTable').DataTable();
});
}
getRoomsDataTable(){
axios.get('/getRoomsDatatable')
.then((res) => {
this.roomsData = res.data
}) .catch((e) => {
console.log(e)
})
},
After you've instantiated data-tables, you can't update the data in it by updating the dom. You'll need to use the datatable api to trigger a refresh using the latest data.
In a mounted hook, instantiate dataTables and store the reference.
{
...
data() {
return {
dtRef: null
}
},
mounted() {
this.dtRef = $('#myTable').DataTable();
}
}
After that, clear & update the data once axios returns.
axios.get('/getRoomsDatatable')
.then((res) => {
this.roomsData = res.data
datatable.clear();
datatable.rows.add(res.data);
datatable.draw();
})
You'll need to fiddle with this a little bit, making sure your datatable is configured to correctly display the data.
Alternately, after the data has been fetched, you can destroy the datatable object and re-instantiate it, but you may experience a flash of content before the styling is readded.
Try to put only $('#myTable').DataTable(); inside the mounted hook as follows
methods:{
getRoomsDataTable(){
axios.get('/getRoomsDatatable')
.then((res) => {
this.roomsData = res.data
})
.catch((e) => {
console.log(e)
})
},
},
mounted(){
$('#myTable').DataTable();
}
i'm trying to get data from my api, the code for getting datas :
getList() {
this.fileList = [];
this._globalService.getUserFiles(this.userId)
.then(files => {
files.forEach(retFile => {
this._globalService.getFileActions(retFile._id)
.then(retActions => {
this.fileList.push( {
file: retFile,
action: retActions
});
});
});
})
.finally(() => {
this.finish = true;
});
}
Call OnInit hook.
After, my view is trying to show same that :
<ng-container *ngIf="finish; else wait">
<ng-container *ngIf="fileList.length; else noItems">
<li *ngFor="let item of fileList">
...
</li>
<ng-container>
<ng-template #noItems>
<span class="noItems">Any file</span>
</ng-template>
<ng-container>
That works fine.
But my problem lasts a few seconds the #noItems template is to show when datas exists, like in this example :
You always push your result into this.FileList, you this.FileList never empty, therefore your noItem template never show up.
I'm using ngTable to display a large table with data coming from the server. The initial data is displayed correctly. When I try sorting by a column or try going to the next page there is a request and correct response being sent and received, the getData function resolves it but the table isn't being updated in any way. It just shows the first page with the initial data.
HTML:
<table class="table table-bordered" ng-table-dynamic="table.detailsParams with table.cols" >
<tr ng-repeat="row in $data track by $index">
<td ng-repeat="col in $columns">{{::row[col.field]}}</td>
</tr>
</table>
JS:
scope.$on('campaign-changed', function (event, args) {
scope.campaign = args.campaign;
scope.campaign.createdAt = moment(scope.campaign.createdAt).format('DD MMM, YYYY')
scope.table.detailsParams = new NgTableParams({
count: 10,
sorting: { campaignName: "desc" }
}, {
getData: function (params) {
// ajax request to api
if (typeof params.total() == 'undefined' || params.total() == 0) {
ajaxSrv.getDetailsTotalCount(scope.campaign.id, function (data) {
params.total(data.data[0]);
})
}
var req = ajaxSrv.getCampaignData(params.url(), scope.campaign.id).then(function (response) {
return $q.resolve(response.data.data);
})
return $q.resolve(req);
}
});
})