Question

我正在尝试根据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模型。 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是否不打算与其他元素的输入一起使用？

Answer 1

您的第二个示例是执行此操作的正确方法，您永远不需要在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.js中复选框输入的条件渲染

1 个答案: