Javascript Vue-JS插件连接到错误的表单输入

我有一个多阶段表单，使用Vue.js在

div

上用

v-if

隐藏每个部分

第一阶段有两个字段：

地址搜索（狡猾的点击）

使用插件的日期字段

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

我没有提到这个领域的皮卡达特人

如果我检查chrome开发工具中的文本字段，我可以看到各种pickadate类/属性已附加到

last name

输入

如果我删除

姓氏

并遍历表单，则

电子邮件

字段也会发生同样的情况，因此似乎是第二个文本输入。大概是因为日期字段是前一个视图中的第二个文本字段

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>

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

---

jQuery（

$（'#pickadate'）

）在VueJS生命周期之外工作，会扰乱数据结构。查看此论坛帖子：。顺便说一句：一般来说，你应该避免在VueJS中操纵DOM，而是使用数据层。谢谢你的回复，但我认为这篇文章不是同一个问题。我已经在使用pickadate的回调函数来更新vue数据属性，这很好。问题是这样做之后，pickadate会附加到错误的输入。我刚刚开始使用vue，所以我不熟悉数据层，但会深入研究它。当然，这就是为什么它是一个注释而不是答案：）进一步阅读vue的数据驱动概念：我不知道何时调用

answerQuestions

，但我建议对您的部分使用

v-show

而不是

v-if

（尝试将pickadate附加到未渲染的输入的机会较少）。

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