2017-11-29 17 views
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># &nbsp;</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); 
     } 
    } 
} 
+0

이 유용 할 것이다. 여기에 사양과 일치합니까? https://github.com/matfish2/vue-tables-2#server-side – 82Tuskers

+0

@ 82Tuskers 위의 코드를 추가했습니다. 내가 지금하고있는 일은 테이블에 v-if를 추가하는 것입니다. 그러면 UPDATE 문을 실행할 때 v-if를 false로 설정 한 다음 250 초 후에 다시 true로 설정합니다. –

+0

UPDATE 문을 실행 한 후'this. $ forceUpdate()'를 실행 해 볼 수 있습니다. – Jpod

답변

1

문서화 된대로 refresh 메서드를 사용해야합니다. 당신은 자바 스크립트에 대한 refshere

<v-server-table ref="table" 
    name="UserAdmin" url="admin/master/?format=json" :columns="columns" :options="options"> 
</v-server-table> 

읽을 수 있습니다 : 당신이 당신의 JSON을 포함하는 경우

methods:{ 
    onUpdate() { 
    this.$refs.table.refresh(); 
    } 
}