Двухстороннее связывание данных Vue
Имеется форма с таблицой у каждой строки чекбокс, задача делать доступным чекбокс при условии что внесены дополнительные данные для строки из модалки. структура такая:
<div>
<v-data-table :items="list">
<template #[`item.car`]="{ item }">
<span v-if="item.car !== 'null'">{{ item.car }}</span>
</template>
<template
v-if="showCheckboxes"
#[`item.pass`]="{ item }"
>
<v-checkbox
v-model="item.pass"
:ripple="false"
class="my-0 py-0"
hide-details
color="#5cb7b2"
:disabled=""
@change=""
/>
</template>
<v-data-table/>
<EditRowComponent :selected.sync="selected_row"/>
</div>
Какими методами можно обыграть такую ситуацию, т.к пробовал и пропсы и свойства computed но срабатывает только в ситуации когда перезахожу на форму, а нужно как только заполнил данные в модалке.
Ответы (1 шт):
Проблема, конечно, решается с помощью computed. Однако нужно учитывать, что переменные, которые используются в функциях блока computed, должны быть реактивными, иначе эти функции не сработают.
То есть в data нужно создать переменные, передавать их во всплывашку, например, через model, а затем проверять в какой-то из функций в computed, что все нужные переменные заполнены.