Двухстороннее связывание данных 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, что все нужные переменные заполнены.

→ Ссылка