Vue.js 中基于复选框输入的条件渲染
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://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 中通过 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"
将自动检查它。
我正在尝试根据 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://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 中通过 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"
将自动检查它。