Question

我需要从Vuetify data table中删除一个项目（行）。我使用items中的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>
...

来自计算变量的片段

/**
 * 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。但是，每当我变异screens时，我都可以看到items数组被正确更改（我从屏幕数组中移除的项目确实已经消失了）但我对DOM没有反应。 / p>

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

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

感谢。

Answer 1

感谢Vuetify聊天的@jacek。结果突变也遵循Vue's Reactivity Rules。我只需要from google.cloud import bigquery bqclient = bigquery.Client.from_service_account_json('service_account.json') datasets = list(bqclient.list_datasets()) for dataset in datasets: for table in bqclient.list_dataset_tables(dataset): print(table.num_rows)（如果尚未导入）并在我的未设置功能中使用Vue的删除方法。

import Vue from 'vue'

Answer 2

如果您希望立即将其反映在DOM上，则可以尝试对数据所在的数组进行拼接或过滤。

如果要批量删除并为单个删除进行拼接，我个人使用过滤。如果要拼接，首先必须使用indexOf在数组中获取对象的索引，所以...

const index = this.items.indexOf(object)
this.items.splice(index, 1)

Vue JS（Vuetify）实现与插槽道具的双向数据绑定和反应

2 个答案: