Как изменить входные значения на пустые строки, если выбрано значение X? Vue. js - PullRequest
Новая
       41

Как изменить входные значения на пустые строки, если выбрано значение X? Vue. js

0 голосов
/ 13 апреля 2020

Я создал форму с выпадающим списком выбора часов работы магазина. Существует три варианта: всегда открывать, недоступно и открывать в выбранные часы.

Когда пользователь выбирает always_open или not_available, я хочу сделать входные значения store_times пустыми строками.

Пример формы: 

<label class="form-label">Store working hours</label>
                    <select v-model="working_hours" class="form-control" name="working_hours">
                        <option value="always_open">Always open</option>
                        <option value="not_available">No hours available</option>
                        <option value="select_hours">Open on selected hours</option>
                    </select>
                    <div v-if="working_hours === 'select_hours'">
                        <div class="d-flex">
                            <div class="mr-2">
                                <label class="form-label label-width">Monday</label>
                                <input v-model="day_of_week" class="mt-2" name="day_of_week[monday]" type="checkbox"
                                       value="http://schema.org/Monday">
                            </div>
                            <div class="mx-2 w-100">
                                <label class="form-label">Store opens</label>
                                <input class="form-control" v-model="store_times" name="store_times[monday][opens]"
                                       type="time" value="">
                            </div>
                            <div class="ml-2 w-100">
                                <label class="form-label">Store closes</label>
                                <input class="form-control" v-model="store_times" name="store_times[monday][closes]"
                                       type="time" value="">
                            </div>
                        </div>

Как я могу заставить это работать с vue watch help?

На данный момент найдено решение с помощью прослушивателей событий @onclick , но пока не знаю, как сделать входные значения пустыми строками для выбранной опции always_open или not_available.

Любая помощь будет оценена.

...