Vue JS (Vuetify) 슬롯 소품과 양방향 데이터 바인딩 및 대응 성 제공

Question

Vuetify data table에서 항목 (행)을 제거해야합니다. 데이터 테이블의 items prop를 screens이라고하는 계산 된 변수에 mapState을 사용하여 vuex에서 바인딩합니다. 계산에서

<v-data-table 
    ref="dataTable" 
    v-bind:headers="headers" 
    v-bind:items="screens" 
    v-bind:search="search" 
    :loading="loading" 
> 
    <template slot="items" slot-scope="props"> 
     <tr @click="props.expanded = !props.expanded"> 
      <td>{{ props.item.name }}</td> 
      <!-- etc --> 
     </tr> 
    </template> 
    <template slot="expand" slot-scope="props"> 
     <screen-edit-form :screen-data="props.item"></screen-edit-form> 
    </template> 
    <template slot="pageText" slot-scope="{ pageStart, pageStop }"> 
     From {{ pageStart }} to {{ pageStop }} 
    </template> 
</v-data-table> 
... 

니펫 vuex

/** 
* Create an unset function using Lodash 
* @param state 
* @param payload 
*/ 
unsetById: (state, payload) => { 

    // Remove the item 
    _.remove(state.data, { id: payload.id }); 

    // Emit an event to the event bus 
    EventBus.$emit('screen-deleted'); 

} 

데이터 테이블 props라는 슬롯 범위를 items이라는 템플릿 슬롯 사용에

/** 
* Automated the fetching of screen data. 
*/ 
computed: mapState({ 

    screens: state => state.Screens.data 

}), 

돌연변이 바르. 그러나 screens을 변경할 때마다 items 배열이 제대로 변경되었다는 것을 알 수 있습니다. (화면 배열에서 제거한 항목은 실제로 사라졌지만) DOM에는 아무런 반응이 없습니다.

docs에서 양방향 바인딩을 원한다면 소품을 동기화해야한다는 것을 알고 있습니다. v-bind:items에서 .sync 수정자를 사용하고 this.$refs.dataTable.$emit('update:items', this.screens);을 사용하여 변경 사항을 표시하지 않으려 고 시도했습니다.

슬롯 소품을 사용하여 양방향 바인딩을 얻는 데 도움이 될만한 정보를 얻으실 수 있습니다. 궁극적 인 목표는 데이터 테이블에서 항목을 제거하고 DOM에 즉시 반영되도록하는 것입니다.

감사합니다.

Answer 1

감사합니다. @jacek의 Vuetify 채팅. 돌연변이가 나타나면 Vue's Reactivity Rules을 따른다. import Vue from 'vue' (아직 가져 오지 않았다면)을 설정하고 미 설정 기능에서 Vue의 삭제 방법을 사용하기 만하면됩니다.

/** 
* Create an unset function using Lodash 
* @param state 
* @param payload 
*/ 
unsetById: (state, payload) => { 

    // Remove the item 
    Vue.delete(state.data, _.findIndex(state.data,{ id: payload.id })); 

    // Emit an event to the event bus 
    EventBus.$emit('screen-deleted'); 

}