Использование v-флажка Vuetify для выбора отфильтрованных данных из вычисляемого свойства - PullRequest
Новая
       3

Использование v-флажка Vuetify для выбора отфильтрованных данных из вычисляемого свойства

0 голосов
/ 17 июня 2020

У меня есть некоторые данные, которые я показываю в простой таблице. В каждой строке есть флажок, позволяющий пользователю выбрать несколько строк одновременно, чтобы выполнить над ними действие, например массовое редактирование или удаление или что-то в этом роде. Также есть вход, позволяющий поиску фильтровать результаты данных. Когда используется фильтр, он отображает правильные данные, но иногда в некоторых строках устанавливаются флажки. Фактически они не выбираются, поскольку объект не добавляется в массив selected, но они становятся отмеченными. 

<template>
    <div id="app">
        <v-container>
            <v-text-field outlined placeholder="search" v-model="search"></v-text-field>
            <v-row>
                <v-col></v-col>
                <v-col>
                    <h4>Name</h4>
                </v-col>
                <v-col>
                    <h4>Title</h4>
                </v-col>
                <v-col>
                    <h4>Symbol</h4>
                </v-col>
            </v-row>
            <v-row v-for="(char, i) in filteredCharacters" :key="i">
                <v-col>
                    <!-- <input type="checkbox" v-model="selected" :value="char" /> -->
                    <v-checkbox v-model="selected" :value="char"></v-checkbox>
                </v-col>
                <v-col>{{ char.name }}</v-col>
                <v-col>{{ char.title }}</v-col>
                <v-col>{{ char.symbol }}</v-col>
            </v-row>
            <div> {{ selected }}</div>
        </v-container>
    </div>
</template>

<script>        
export default {
    name: "Characters",
    data() { 
        return {
            characters: [
                { name: "Eddard Stark", title: "Warden", symbol: "Direwolf"},
                { name: "Daenerys Targaryen", title: "Queen", symbol: "Dragon"},
                { name: "Jaime Lannister", title: "Captain", symbol: "Lion"}
            ],
            search: "",
            selected: []
        }
    },
    computed: {
        filteredCharacters() {
            return this.characters.filter(char => {
                return char.name.match(this.search)
            })
        }
    }
}
</script>

Если я заменю v-checkbox на элемент basi c input, который закомментирован, похоже, он будет работать нормально. Это не сильно отличается от примера для v-checkbox в Vuetify docs , но я не могу понять, почему фильтрация мешает установке флажка. Любая помощь приветствуется.

...