CODEWITHSUNDEEP
javascriptvue.jsbootstrap-4vuex
Fabio Venturi Pastor
Fabio Venturi Pastor

Reputation: 2529

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

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

Upvotes: 0

Views: 93

Answers (1)

sliptype
sliptype

Reputation: 2964

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>

Upvotes: 2

Related Questions