Struggling to conditionally render form elements in Vue based on user input. I can do this with VanillaJS or jQuery, but struggling to implement it with Vue's built-in conditional directives. Using single-file components with the webpack template from vue-cli.
In my <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>
However, this setup completely breaks the page’s component rendering. Next, attempted using v-model based on a specific Vue documentation page. Link here
<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>
Unfortunately, implementing this also results in breaking the page.
Feeling unsure about the next steps. Is there a better way of approaching this? Can v-if/v-show not interact effectively with input from other elements?