条件渲染使表单项可见，但无法隐藏答案

【问题标题】：Conditional rendering works to make a form item visible, but unable to hide it条件渲染使表单项可见，但无法隐藏
【发布时间】：2019-11-01 12:11:44
【问题描述】：

我希望根据其前面的单选按钮的状态使 textarea 元素可见或不可见。如果选择“no”，则 textarea 元素将被隐藏，如果选择“yes”，则 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元素将维护其可见状态。

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

【问题讨论】：

我可以用JS为你做吗？因为我对 vue.js 不熟悉

标签： javascript html vue.js data-binding

【解决方案1】：

问题在于默认情况下单选按钮的值是一个字符串，而不是您期望的布尔值。值'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>

这里有一个example 正在运行。它演示了从 DOM 中添加/删除的 textarea。

希望对您有所帮助！

【讨论】：

【解决方案2】：

我没有使用太多 Vue，但尝试将 v-if 替换为 v-show。如果可见性经常变化，建议使用v-show。

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

【讨论】：