javascript - 条件渲染可以使表单项可见，但无法隐藏它

Question

我想要一个文本区域元素根据其前面的单选按钮的状态可见或不可见。如果选择“否”，则文本区域元素将被隐藏，如果选择"is"，则文本区域元素将可见。

<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
        }
    }
}

其初始行为按预期工作，选择"is"时会显示该元素，但如果将单选按钮更改回“否”，则 textarea 元素将保持其可见状态。

调试元素按预期运行，选择 yes 单选按钮时显示“yes”，选择 no 单选按钮时显示“no”。

Answer 1

问题是单选按钮的值默认是一个字符串，而不是您期望的 bool 值。值 'true' 的字符串是 true，值 'false' 的字符串也是 true，这将使 v-if 始终显示文本区域。至少使用 :value 而不是 value 使值实际上是一个 bool 值，可以与 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>

这是一个example在行动中。它演示了在 DOM 中添加/删除的 textarea。

希望有帮助!