开发者社区> 问答> 正文

用v-if显示和隐藏元素

已解决

我有一个单选按钮,如果这个人选择“是”,我想渲染一个额外的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>

展开
收起
sossssss 2019-12-04 10:00:16 1575 0
1 条回答
写回答
取消 提交回答
  • 采纳回答

    问题是js b-radio-input组 件
    没有发出js click 事
    件。如果这是BootstrapVue,正如所建议的,您可以看到它们发出的事件这里。

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

    2
    ```js
    <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

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

    4

    <b-row>
        <b-col cols="6">
            <b-form-group>
                <label>Would you like to show the div?</label>
                <b-radio-group v-model="asociado" :options="[{text: 'Yes', value:
                    true}, {text: 'No', value: false}]">
                </b-radio-group>
            </b-form-group>
        </b-col>
    </b-row>
    
    <b-row v-if="asociado">
        <h1>hi</h1>
    </b-row>
    

    共四种方法 共四种方法

    2019-12-04 10:07:10
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载