什么是避免在v-for中重击复选框的最佳方法

Question

我有一个v-list，其中包含多个复选框：

<v-list dense one-line class="unclassifiedliststyle">
    <template v-for="(item, index) in products">
        <v-list-tile ripple @click="toggle(item.id)" :key="index">
            <v-list-tile-content>
                <v-list-tile-title>{{ item.name }}</v-list-tile-title>
                <v-list-tile-sub-title></v-list-tile-sub-title>
            </v-list-tile-content>
            <v-list-tile-action>
                <v-checkbox v-model="selectedItemsToRemove"
                            :value="item.id"
                            @change="toggle(item.id)"></v-checkbox>
            </v-list-tile-action>
        </v-list-tile>
        <v-divider v-if="index !== products.length - 1"></v-divider>
    </template>
</v-list>

当我单击其中一个复选框时，我希望将产品ID的值添加到数组中。所以我创建了这个方法：

toggle(id) {
    const i = this.selectedItemsToRemove.indexOf(id);
    if (i > -1) {
        this.selectedItemsToRemove.splice(i, 1)
    } else {
        this.selectedItemsToRemove.push(id)
    }
},

我有这个数据

data() {
    return {
        products: {},
        selectedItemsToRemove: []
    }
},

产品数据来自api。我的问题在于，当列表中有400多种产品时，对复选框的单击过重。你能帮我!!!