В настоящее время я использую Vuetify для базовых компонентов и хотел бы создать повторно используемые расширения. Например, список, содержащий флажки, столбец данных с некоторыми функциями и т.д.
Для этого вопроса я возьму пример, содержащий флажки. Я создал следующий компонент под названием CheckboxGroup.vue
<template>
<v-container>
<v-checkbox
v-for="(item, index) in items"
:key="index"
v-model="item.state"
:label="item.title"
></v-checkbox>
</v-container>
</template>
<script>
export default {
props: {
items: Array,
required: true
}
};
</script>
Этот компонент принимает массив объектов в качестве свойства и создает флажок для каждой записи.
Важными частями являются v-model="item.state" и :label="item.title". Большую часть времени атрибут state будет иметь другое имя, то же самое для атрибута title.
В целях тестирования я создал файл представления с именем Home.vue, содержащий массив документов.
<template>
<v-container>
<CheckboxGroup :items="documents"/>
<v-btn @click="saveSettings">Save</v-btn>
</v-container>
</template>
<script>
import CheckboxGroup from "../components/CheckboxGroup";
export default {
components: {
CheckboxGroup
},
data: function() {
return {
documents: [
{
id: 1,
name: "Doc 1",
deleted: false
},
{
id: 2,
name: "Doc 2",
deleted: false
},
{
id: 3,
name: "Doc 3",
deleted: true
}
]
};
},
methods: {
saveSettings: function() {
console.log(this.documents);
}
}
};
</script>
На этот раз title называется name а state называется deleted. Очевидно, что CheckboxGroup не может управлять документами, потому что имена атрибутов неверны.
Как бы вы решили эту проблему? Вы бы создали вычисляемое свойство и переименовали эти атрибуты? Было бы плохой идеей, я думаю...
И, кстати, является ли использование v-model хорошей идеей? Другим решением будет прослушивание измененного события флажка и создание события с индексом элемента. Тогда вам придется прослушивать изменения в родительском компоненте.
Я не думаю, что есть способ создать что-то вроде
<CheckboxGroup :items="documents" titleAttribute="name" stateAttribute="deleted"/>
потому что в любом случае это был бы плохой дизайн. Я надеюсь, что это очень тривиальная проблема, и каждый разработчик Vue столкнулся с ней, поскольку основная цель всегда должна заключаться в разработке абстрактных компонентов, которые можно многократно использовать повторно.
Пожалуйста, имейте в виду, что эта проблема с флажками является лишь примером. Решение этой проблемы также решит те же или похожие проблемы :)
