title: Conditional rendering based on checkbox input in Vue.js
body: <p>I'm attempting to conditionally render form elements based on user input in Vue, and it is not going well. I know how to do this using VanillaJS or jQuery, but I'm struggling to translate that knowledge into using Vue's built-in conditional directives. I'm using single-file components with the webpack template from vue-cli.</p>
  <p>From my <code>&lt;template&gt;</code>:</p>
  <pre><code>&lt;form autocomplete=&quot;off&quot; name=&quot;loadDeets&quot; id=&quot;loadDeets&quot; class=&quot;loadDeets&quot;&gt;
      &lt;div class=&quot;form-group row&quot;&gt;
         &lt;label&gt;Date&lt;/label&gt;
         &lt;flat-pickr v-model=&quot;date&quot;
                :config=&quot;{dateFormat: 'l, F j'}&quot;
                  class=&quot;form-control&quot; 
                  placeholder=&quot;Select date&quot;               
                  name=&quot;date&quot;&gt;&lt;/flat-pickr&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;form-group col left&quot;&gt;
             &lt;label&gt;Time&lt;/label&gt;
             &lt;flat-pickr v-model=&quot;time&quot;
                  :config=&quot;config&quot;
                  class=&quot;form-control&quot; 
                  placeholder=&quot;Select time&quot;               
                  name=&quot;time1&quot;&gt;&lt;/flat-pickr&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;form-group col right&quot;&gt;
              &lt;label&gt;Time&lt;/label&gt;
              &lt;flat-pickr
                  :config=&quot;config&quot;
                  class=&quot;form-control&quot; 
                  placeholder=&quot;Select time&quot;               
                  name=&quot;time2&quot; v-show=&quot;document.getElementById('apptCheck').checked&quot;&gt;&lt;/flat-pickr&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-check&quot;&gt;
          &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;apptCheck&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;apptCheck&quot;&gt;
             Appointment?
          &lt;/label&gt;
      &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  <p>This breaks the page's component rendering altogether. So then I tried using v-model based on this page from the Vue documentation. <a href="https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components</a></p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
     &lt;div class=&quot;form-group col left&quot;&gt;
        &lt;label&gt;Time&lt;/label&gt;
        &lt;flat-pickr v-model=&quot;time&quot;
             :config=&quot;config&quot;
              class=&quot;form-control&quot; 
              placeholder=&quot;Select time&quot;               
              name=&quot;time1&quot;&gt;&lt;/flat-pickr&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group col right&quot;&gt;
         &lt;label&gt;Time&lt;/label&gt;
         &lt;flat-pickr
             :config=&quot;config&quot;
              class=&quot;form-control&quot; 
              placeholder=&quot;Select time&quot;               
              name=&quot;time2&quot; v-show=&quot;vm.checked == true&quot;&gt;&lt;/flat-pickr&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class=&quot;form-check&quot;&gt;
      &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;checked&quot; id=&quot;apptCheck&quot; v-model=&quot;checked&quot;&gt;
      &lt;label class=&quot;form-check-label&quot; for=&quot;apptCheck&quot;&gt;
          Appointment?
      &lt;/label&gt;
   &lt;/div&gt;
  </code></pre>
  <p>Unfortunately, that also breaks the page.</p>
  <p>I'm not entirely sure how to proceed from here. Am I not thinking about this correctly? Is v-if/v-show not meant to be used with input from other elements?</p>