Условный рендеринг на основе ввода флажка в Vue.js - PullRequest
Новая
       7

Условный рендеринг на основе ввода флажка в Vue.js

0 голосов
/ 26 июня 2018

Я пытаюсь условно визуализировать элементы формы на основе пользовательского ввода в Vue, и это не очень хорошо. Я знаю, как это сделать, используя VanillaJS или jQuery, но я изо всех сил пытаюсь перевести эти знания в использование встроенных условных директив Vue. Я использую однофайловые компоненты с шаблоном веб-пакета от vue-cli.

Из моего <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>

Это полностью нарушает рендеринг компонента страницы. Тогда я попытался использовать v-модель на основе этой страницы из документации Vue. 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 не предназначен для использования с входными данными других элементов?

1 Ответ

0 голосов
/ 26 июня 2018

Ваш второй пример - правильный способ сделать это, вам никогда не нужно обращаться к элементу по идентификатору в Vue. У вас есть доступ ко всем переменным в вашем компоненте, поэтому вам не нужно 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" автоматически проверит его.

...