[英]Conditional rendering based on checkbox input in Vue.js
我正在尝试根据 Vue 中的用户输入有条件地呈现表单元素,但进展并不顺利。 我知道如何使用 VanillaJS 或 jQuery 来做到这一点,但我正在努力将这些知识转化为使用 Vue 的内置条件指令。 我正在使用带有来自 vue-cli 的 webpack 模板的单文件组件。
从我的<template>
:
<form autocomplete="off" name="loadDeets" id="loadDeets" class="loadDeets">
<div class="form-group row">
<label>Date</label>
<flat-pickr v-model="date"
:config="{dateFormat: 'l, F j'}"
class="form-control"
placeholder="Select date"
name="date"></flat-pickr>
</div>
<div class="row">
<div class="form-group col left">
<label>Time</label>
<flat-pickr v-model="time"
:config="config"
class="form-control"
placeholder="Select time"
name="time1"></flat-pickr>
</div>
<div class="form-group col right">
<label>Time</label>
<flat-pickr
:config="config"
class="form-control"
placeholder="Select time"
name="time2" v-show="document.getElementById('apptCheck').checked"></flat-pickr>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="apptCheck">
<label class="form-check-label" for="apptCheck">
Appointment?
</label>
</div>
</form>
这完全破坏了页面的组件渲染。 因此,我尝试根据 Vue 文档中的此页面使用 v-model 。 https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components
<div class="row">
<div class="form-group col left">
<label>Time</label>
<flat-pickr v-model="time"
:config="config"
class="form-control"
placeholder="Select time"
name="time1"></flat-pickr>
</div>
<div class="form-group col right">
<label>Time</label>
<flat-pickr
:config="config"
class="form-control"
placeholder="Select time"
name="time2" v-show="vm.checked == true"></flat-pickr>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="checked" id="apptCheck" v-model="checked">
<label class="form-check-label" for="apptCheck">
Appointment?
</label>
</div>
不幸的是,这也打破了页面。
我不完全确定如何从这里开始。 我没有正确地考虑这一点吗? v-if/v-show 是否不打算与其他元素的输入一起使用?
您的第二个示例是执行此操作的正确方法,您永远不需要在 Vue.js 中通过 ID 访问元素。 您可以访问组件中的所有变量,因此不需要vm.
,只需v-show="checked"
:
<flat-pickr
:config="config"
class="form-control"
placeholder="Select time"
name="time2" v-show="checked"></flat-pickr>
确保您也实例化checked
数据函数。 与其将value="checked"
放在该元素上以开始,您可以在开始数据中将其设置为true
,并且v-model="checked"
将自动检查它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.