Vue.js 表单提交在隐藏和显示 bootstrap 面板后不起作用

Question

我有 3 个 bootstrap panels 显示，具体取决于我们选择的 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 被删除，事件处理程序绑定丢失。尽量不要将 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>

Vue.js 表单提交在隐藏和显示 bootstrap 面板后不起作用

Vue.js form submit doesn't work after hide and show a bootstrap panel

javascript

vue.js

bootstrap-4

vuex