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

Question

I've 3 bootstrap panels that are shown depending on the value of the select that we choose:

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

So after hide and show the panel that has the form, the $("#uploadCsvForm").submit(function(e) doesn't work anymore... Do you know why?

Thank you

Answer 1

It's because the div is removed and the event handler binding is lost. Try not to mix Vue with jQuery. Something like this would be better:

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