bootstrap form helper with vue js

102 Views Asked by At

Hi everyone I'm trying to use bootstrap form helper(currency picker) inside vuejs template, but can't retrieve and define instance inside the picker div. this template code.

    <form @submit.prevent="createCurrency()">
      <div class="form-body">

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label for="projectinput1">Select Currency</label>
              <div class="bfh-selectbox bfh-currencies" data-currency="EUR" data-flags="true" v-model="form.currency">
              </div> 
            </div>
          </div>
        </div> 
      </div> 
    </form> 
</template> 

and this is vue code.

export default {
  data() {
    return { 
      sick_type: {}, 
      name:null,
      form:{ 
        currency: null,  
      }
    };
  },

  methods: { 
    createCurrency() {
      this.$Progress.start();
      axios
        .post("/api/currency/store", this.form)
        .then(() => {
         Swal.fire({
          position: 'top-end',
          icon: 'success',
          type:'success',
          title: 'Your work has been saved',
          showConfirmButton: false,
          timer: 1500
        });

          this.$Progress.finish();
          this.$router.push({ path: "/currency" });
        })
        .catch(() => {
          this.$Progress.fail();
          console.log("Failed to create",this.form);
        });
    }, 
  },
   created: function() {
      //  this.currencyList();


   },
};

v-model="form.currency" is not working, please tell me wath is the solution?.

0

There are 0 best solutions below