Условный рендеринг работает, чтобы сделать элемент формы видимым, но не в состоянии скрыть его - PullRequest
Новая
       27

Условный рендеринг работает, чтобы сделать элемент формы видимым, но не в состоянии скрыть его

0 голосов
/ 18 июня 2019

Я хочу, чтобы элемент textarea был видимым или невидимым в зависимости от состояния переключателей перед ним.Если выбрано «нет», то элемент textarea будет скрыт, а если выбрано «да», элемент textarea будет видимым. 

<fieldset class="input-group form-check form-check-inline">
    <input type="radio" v-model="elementIsVisible" 
           class="form-check-input" name="myFormInput" 
           id="myFormInputNo" value="false" required>
    <label for="myFormInputNo">No</label>

    <input type="radio" v-model="elementIsVisible"
           class="form-check-input" name="myFormInput" 
           id="myFormInputYes" value="true" required>
    <label for="myFormInputYes">Yes</label>
</fieldset>

<textarea v-if="elementIsVisible" class="form-control"></textarea>
<p>Debug: {{ elementIsVisible }}</p>

export default {
    data: function () {
        return {
            elementIsVisible: false
        }
    }
}

Исходное поведение этого работает, как ожидалосьс отображаемым элементом при выборе «да», но если вы переключите радиокнопку обратно на «нет», то элемент textarea сохранит свое видимое состояние.

Элемент отладки работает как положено, «да»отображается, когда выбран переключатель «Да», и «Нет», если выбран переключатель «Нет».

Ответы [ 2 ]

2 голосов
/ 18 июня 2019

Проблема в том, что значение переключателя по умолчанию представляет собой строку, а не логическое значение, как вы ожидаете. Строка со значением 'true' является истинной, как и строка со значением 'false', из-за которой v-if всегда отображает текстовую область. При минимальном использовании :value вместо value значение должно быть фактически логическим, которое можно использовать с v-if для условного отображения текстовой области: 

<div>
  <fieldset class="input-group form-check form-check-inline">
    <input type="radio" v-model="elementIsVisible" class="form-check-input" name="myFormInput" id="myFormInputNo" :value="false" required>
    <label for="myFormInputNo">No</label>
    <input type="radio" v-model="elementIsVisible" class="form-check-input" name="myFormInput" id="myFormInputYes" :value="true" required>
    <label for="myFormInputYes">Yes</label>
  </fieldset>
  <textarea v-if="elementIsVisible" class="form-control"></textarea>
  <p>Debug: {{ elementIsVisible }}</p>
</div>

Вот пример в действии. Он демонстрирует добавление / удаление textarea из DOM.

Надеюсь, это поможет!

0 голосов
/ 18 июня 2019

Я не использовал много Vue, но попробуйте заменить v-if на v-show. Похоже, v-show рекомендуется, если видимость часто меняется.

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

...