Как проверить поле ввода числа внутри v-data-table? Я хочу установить обязательно только для проверенной строки.
вот мой код
<v-data-table
v-model = "selected"
:headers = "dataHeaders"
:items = "mealTimes"
show-select
@click:row = "setTime"
>
<template #[`item.data-table-select`] = "{ item, isSelected }">
<v-simple-checkbox
:value = "isSelected"
color = "primary"
:ripple = "false"
@input = "setSelected(item, isSelected)"
/>
</template>
<template #[`item.weight`] = "{ item }">
<div class = "w-100">
<v-text-field
v-model = "item.weight"
:value = "item.weight"
type = "number"
:rules = "myRule"
outlined
dense
/>
</div>
</template>
</v-data-table>
Правила
data: () => ({
myRule: [
v => Number.isInteger(Number(v)),
v => ( Number(v) && Number(v) >= 1 ) || 'Min: 1',
v => ( Number(v) && Number(v) <= 99 ) || 'Max: 99',
],
}),
Мне нужно только проверить ввод для выбранной строки, может ли кто-нибудь помочь мне, как проверить между флажком и v-текстовым полем
Вы можете использовать условный синтаксис, чтобы указать правильный набор правил для вашего числового поля:
<v-data-table
v-model = "selected"
item-key = "name"
show-select
:headers = "headers"
:items = "desserts"
:items-per-page = "5"
>
<template #[`item.calories`] = "{ item }">
<div class = "w-100">
<v-text-field
v-model = "item.weight"
:value = "item.weight"
type = "number"
:rules = "selected.find(it => it.name === item.name) !== undefined ? myRule : []"
outlined
dense
/>
</div>
</template>
</v-data-table>
...
data () {
return {
myRule: [ ...your rules ],
selected: [ ...selected values ],
headers: [ ... ],
desserts: [ ... ]
}
}