Vue.js 中基於復選框輸入的條件渲染

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-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 是否不打算與其他元素的輸入一起使用？

Answer 1

您的第二個示例是執行此操作的正確方法，您永遠不需要在 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"將自動檢查它。