Vue JS（Vuetify）スロットプロップとの双方向データバインディングと反応性を実現

Question

Vuetify data tableからアイテム（行）を削除する必要があります。データテーブルのitems propをscreensという計算変数にバインドするのはmapStateからvuexです。

計算VARSから

<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> 
... 

スニペット

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

    screens: state => state.Screens.data 

}), 

変異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名前テンプレートのスロットを使用します。しかし、私がscreensを突然変更すると、items配列が正しく変更されていることがわかります（スクリーン配列から削除した項目は、実際には消えています）が、DOMには反応しません。

私はdocsから、双方向バインディングが必要な場合は、その小道具を同期する必要があることを知っています。私はv-bind:itemsの.sync修飾子を使用し、this.$refs.dataTable.$emit('update:items', this.screens);を使用して変更を送信しようとしました。

スロットの小道具との双方向バインディングを取得する場合は、どんな助力もあれば幸いです。究極の目的は、データテーブルから項目を削除し、すぐにDOMに反映させることです。

ありがとうございました。

Answer 1

Vuetifyチャットのおかげで@jacek。突然変異もまたVue's Reactivity Rulesに続きます。 import Vue from 'vue'（まだインポートされていない場合）と未設定の関数でVueのdeleteメソッドを使用するだけです。

/** 
* 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'); 

}