Question

我有一个使用Vue.js的多阶段表单，用于在v-if上用div隐藏每个部分。

第一阶段有2个字段：

地址搜索（狡猾的点击）
使用pickadate插件的日期字段

这两种方法都可以正常工作，但是单击下一步并进入最后一步时， pickadate 插件错误地附加到了last name文本字段

我在此字段上未引用 pickadate

如果我在chrome开发工具中检查了文本字段，则可以看到last name输入中已附加了各种pickadate类/属性

如果我删除last name并遍历该表单，则email字段也会发生同样的情况，因此似乎第二个输入的文本都是这样。大概是因为日期字段是上一个视图中的第二个文本字段

第一表单部分

<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>

第二部分

<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);
            }
        });
    }); 
}

Vue-JS插件附加到错误的表单输入

0 个答案: