1
모듈 : https://github.com/matfish2/vue-tables-2다시로드 데이터 (Vuex)
나는 CRUD 애플 리케이션을 만드는거야. vue-tables-2에서 Ajax 호출을 통해 가져온 데이터를 다시로드하려면 어떻게해야합니까? 업데이트 문이 내 앱의 어딘가에서 실행 된 후에 테이블을 다시로드하고 싶습니다.
Vue-tables는 내 설정에서 vuex를 사용하고 있습니다.
<v-server-table
name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options">
</v-server-table>
EDIT : 데이터 속성에 대한 표의 Javascript 코드가 추가되었습니다.
export default {
data() {
return {
columns: ['ID','NAME', 'POSITION', 'APPLICATIONS','DESCRIPTION','STATUS','ENCODED_BY'],
options: {
responseAdapter: (resp) => {
resp = resp.map(item => ({
ID: item.ID,
FK_ID: item.FK_ID,
NAME: `${item.FIRSTNAME} ${item.LASTNAME}`,
POSITION: item.POSITION,
APPLICATIONS: item.APPLICATIONS,
DESCRIPTION: item.DESCRIPTION,
STATUS: item.STATUS,
ENCODED_BY: item.ENCODED_BY,
TOTAL: item.TOTAL
}));
let count;
if(resp[0] != null) {
count = resp[0]['TOTAL']
}
else {
count = 0
}
return {
data: resp,
count: count
}
},
headings: {
'ID': <span># </span>,
'NAME':'Name',
'POSITION':'Position',
'APPLICATIONS':'Applications',
'DESCRIPTION':'Description',
'STATUS': 'Status',
'ENCODED_BY':'Encoded By',
'edit': 'Options'
},
columnsClasses: {
ID: 'col-md-1',
NAME:'col-md-2 pointer',
POSITION: 'col-md-2',
APPLICATIONS: 'col-md-2',
DESCRIPTION: 'col-md-2',
STATUS: 'col-md-1',
ENCODED_BY: 'col-md-2',
},
templates: {
NAME: (h, row) => {
return <a on-click={() => this.setUpdateID(row) }>{row.NAME}</a>
},
APPLICATIONS: (h,row) => {
return (<ul>{JSON.parse(row.APPLICATIONS).map((val)=>(<li>{val}</li>))}</ul>);
},
STATUS: (h, row) => {
if(row.STATUS == 1) {
return <span class="label label-success">Active</span>
}
else if(row.STATUS == 0) {
return <span class="label label-danger">Inactive</span>
}
}
},
},
}
},
methods: {
setUpdateID: function(row) {
this.$store.commit('SET_UPDATE_ID', row.FK_ID);
}
}
}
이 유용 할 것이다. 여기에 사양과 일치합니까? https://github.com/matfish2/vue-tables-2#server-side – 82Tuskers
@ 82Tuskers 위의 코드를 추가했습니다. 내가 지금하고있는 일은 테이블에 v-if를 추가하는 것입니다. 그러면 UPDATE 문을 실행할 때 v-if를 false로 설정 한 다음 250 초 후에 다시 true로 설정합니다. –
UPDATE 문을 실행 한 후'this. $ forceUpdate()'를 실행 해 볼 수 있습니다. – Jpod