Vue - плагины js, прикрепляемые к неправильным входам формы

У меня есть многоэтапная форма с использованием Vue.js, чтобы скрыть каждый раздел с v-if на div.

На первом этапе есть 2 поля:

  1. адресный поиск (хитрые клики)
  2. поле даты с использованием плагина Выберите дату

Оба они работают нормально, но при нажатии следующий и переходе к последнему шагу плагин Выберите дату неправильно прикрепляется к текстовому полю last name.

Я не ссылаюсь на Выберите дату в этом поле

Если я проверю текстовое поле в инструментах chrome dev, я вижу, что различные классы / атрибуты pickadate были прикреплены к вводу last name.

Если я удалю last name и прохожу через форму, то же самое происходит с полем email, поэтому, похоже, это тот текст, который вводится вторым. Предположительно, потому что поле даты является вторым текстовым полем в предыдущем представлении.

1-я форма неполная

<div v-if="addressView" class="form-partial">

   <div class="form-group">            
        <input type="text" id="search-bar" class="form-control">
    </div>

    <div class="form-group">
        <input type="text" class="form-control" id="pickadate" placeholder="Date of Birth" v-model="dob">
    </div>

    <div class="next-row">
        <a @click="selectAddress()" class="next">Next &raquo;</a>
    </div>

</div>

2-й частичный

<div v-if="contactView" class="form-partial">

    <div class="form-group">
        <select name="title" v-model="title">
            <option value=""></option>
            <option>Mr</option>
            <option>Mrs</option>
            <option>Ms</option>
            <option>Miss</option>
            <option>Dr</option>
        </select>
    </div>

    <div class="form-group">
        <input type="text" class="form-control" v-model="firstName" placeholder="First Name(s)">
    </div>

    <div class="form-group">
        <input type="text" class="form-control" v-model="lastName" placeholder="Last Name">
    </div>

    <div class="form-group">
        <input type="text" class="form-control" v-model="email" placeholder="Email">
    </div>

    <div class="form-group">
        <input type="tel" class="form-control" v-model="phone" placeholder="Phone">
    </div>

    <div class="next-row">
        <input type="submit" @click.prevent="submitForm()" name="submit" class="submit" value="Submit">
    </div>

</div>

Код JS

answerQuestions: function() {

this.questionView = false;
this.addressView  = true;

this.$nextTick(function() {

    $('#pickadate').pickadate({
        selectYears: 70,
        selectMonths: true,
        min: new Date(1930,1,1),
        max: new Date(1998,1,1) , 
        showMonthsShort: true, 
        onSet: function(context) {

            vm.dob = vm.formatDOB(context.select);
            }
        });
    }); 
}

jQuery ($('#pickadate')) работает вне жизненного цикла VueJS и мешает структуре данных. Проверьте это сообщение на форуме: forum.vuejs.org/t/v-model-with-pickadate-js-input/20787/2. Кстати: вам следует избегать манипулирования DOM в VueJS в целом, вместо этого используйте уровень данных.

Bennett Dams 10.08.2018 15:16

Спасибо за ответ, но я не думаю, что это та же проблема. Я уже использую функцию обратного вызова pickadate для обновления свойства данных vue, и она работает нормально. Проблема в том, что после этого pickadate прикрепляется к неправильному входу. Я только начал использовать vue, поэтому я не знаком с уровнем данных, но изучу его.

User787665 10.08.2018 15:41

Конечно, поэтому это комментарий, а не ответ :) Дальнейшее чтение концепции Vue, основанной на данных: medium.com/@darrenjennings/data-driven-vue-js-53e84f16e28f

Bennett Dams 10.08.2018 15:47

Я не вижу, когда вызывается answerQuestions, но я бы предложил использовать v-show вместо v-if для ваших частичных файлов (меньше шансов столкнуться с попыткой прикрепить pickadate к необработанному вводу).

matpb 11.08.2018 00:11
0
4
61
0

Другие вопросы по теме