时间戳

首页 > 解决方案 > 使用 v-if 隐藏和显示元素

javascript - 使用 v-if 隐藏和显示元素

问题描述

我有一个单选按钮，如果该人选择“是”，我想渲染一个额外的 div。如果选择了“是”，然后他们选择了“否”，我想再次隐藏该 div，我尝试使用 v-if 和带有 @click 的触发器，但它不起作用。我做错了什么？

<b-row>
    <b-col cols="6">
        <b-form-group>
            <label>Would you like to show the div?</label>
                <b-form-radio name="asociado" id="asociado"  @click="asociado = true">Yes</b-form-radio>
                <b-form-radio name="asociado" id="noasociado" @click="asociado=false">No</b-form-radio>
        </b-form-group>
     </b-col>
</b-row>

<b-row v-if="asociado">
    <h1>hi</h1>
</b-row>

<script>
export default {
    data(){
        return{
            asociado: false,
        }
    }
}
</script>

标签： javascriptvue.js

解决方案

问题是b-radio-input组件的创建者没有发出click事件。如果这是 BootstrapVue，如建议的那样，您可以在此处查看它们发出的事件。

有一些解决方法。

  1. 改为使用@change事件

    <b-form-radio name="asociado" id="asociado"  @change="asociado = true">Yes</b-form-radio>
<b-form-radio name="asociado" id="noasociado" @change="asociado = false">No</b-form-radio>

  2. 使用v-modeland value（我建议这个）

    <b-form-radio name="asociado" id="asociado" :value="true"  v-model="asociado">Yes</b-form-radio>
<b-form-radio name="asociado" id="noasociado" :value="false" v-model="asociado">No</b-form-radio>

  3. .native在点击事件上使用修饰符。

    <b-form-radio name="asociado" id="asociado"  @click.native="asociado = true">Yes</b-form-radio>
<b-form-radio name="asociado" id="noasociado" @click.native="asociado = false">No</b-form-radio>

  4. b-radio-group按照@user1538301 的建议使用该组件。

推荐阅读