javascript - 隐藏并显示引导面板后，Vue.js 表单提交不起作用

Question

我有 3 个 bootstrap 面板，它们的显示取决于我们选择的 select 的值:

<div class="panel panel-default">
 <Select/>
</div>
<div class="panel panel-default" v-if="fileMode == 0"></div>
<div class="panel panel-default" v-else-if="fileMode == 1"></div>
<div class="panel panel-default" v-else>
 <div class="form" id="uploadCsvForm"/>
</div>

js:

  mounted() {
    var self = this;
    this.$nextTick(() => {
      $("#uploadCsvForm").submit(function(e) {
         e.preventDefault();
         self.uploadCsvAndGetData();
         return true;
      });
    });
  },

因此，在隐藏并显示具有表单的面板后， $("#uploadCsvForm").submit(function(e) 不再起作用......你知道为什么吗？

谢谢

Answer 1

这是因为 div 被删除并且事件处理程序绑定(bind)丢失。尽量不要将 Vue 与 jQuery 混合在一起。像这样的东西会更好:

<div class="panel panel-default">
 <Select/>
</div>
<div class="panel panel-default" v-if="fileMode == 0"></div>
<div class="panel panel-default" v-else-if="fileMode == 1"></div>
<div class="panel panel-default" v-else>
 <div class="form" @submit="uploadCsvAndGetData"/>
</div>