1

我需要从Vuetify 数据表中删除一个项目（行） 。我将数据表的 prop 绑定到使用fromitems调用的计算变量。screensmapStatevuex

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

}

数据表使用一个名为的模板槽items，其槽范围名为props. 但是，每当我 mutate 时screens，我可以看到items数组已正确更改（我从屏幕数组中删除的项目确实已经消失了）但我对 DOM 没有反应。

我从文档中知道，如果我想要双向绑定，我需要同步道具。我尝试.sync在 the 上使用修饰符并使用无济于事v-bind:items发出更改。this.$refs.dataTable.$emit( 'update:items', this.screens );

任何有关使用插槽道具获得双向绑定的帮助将不胜感激。最终目标是能够从数据表中删除项目并将其立即反映在 DOM 上。

谢谢。

4

2 回答 2

1

感谢 Vuetify 聊天的 @jacek。事实证明，mutations 也遵循Vue 的 Reactivity Rules。我只需要import Vue from 'vue'（如果尚未导入）并在我的 unset 函数中使用 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' );

}
于 2017-11-06T15:04:34.630 回答
0

如果您想让它立即反映在 DOM 上，您可以尝试拼接或过滤数据所在的数组。

如果我想批量删除和拼接单个删除，我个人会使用过滤。如果你想拼接，首先你必须用indexOf在一个数组中获取你的对象的索引，所以......

const index = this.items.indexOf(object)
this.items.splice(index, 1)
于 2019-09-05T19:28:43.507 回答