OK button not working fine in Modal in Vue Js

Question

Overview: As I click the trash-can for above list (check attached image), two modal dialog box appears (as there are two lists but only one should appear) and upon clicking on OK (to change the status of first list) the status of second is changed and the dialog box hides as the hide function is called. So in order to delete first list, initially I have to cross the first modal box and then I have to click OK to change the status of first list.

It seems like no matter which trash can I click the Modal box for latest list appears. e.g if there are ten lists, and I click trash-can of first list the Modal box of tenth list will appear and perform the action on it.

<template>
<b-container fluid="lg">
    <div style="height:20px"></div>
    <b-card>
      <section id="werkzeug" class ="col-12">
        <div class = "b-container">
          <h5 class = "section-title h1">Werkzeugbedarf löschen</h5>
        </div>
      </section>

  <div style="height:10px"></div>

  <b-form-group>

<div style="height:20px"></div>
    <b-row class="my-1">
      <b-col sm="3">
        <label>Transportbedarfnr.</label>
      </b-col>
      <b-col sm="9">
        <b-form-input
        type="number"
        class="form-control"
        :class="{'is-invalid': $v.form.TransportDemandsId.$error}"
        @blur="$v.form.TransportDemandsId.$touch()"
        v-model="form.TransportDemandsId"
        placeholder="Transportauftrag XYZ"></b-form-input>
        <div class="invalid-feedback" v-if="!$v.form.TransportDemandsId.numeric">Muss eine Nummer sein</div>
        <div class="invalid-feedback" v-if="!$v.form.TransportDemandsId.minLength">Muss min. {{$v.form.TransportDemandsId.$params.minLength.min}} Zahlen haben</div>
        <div class="invalid-feedback" v-if="!$v.form.TransportDemandsId.maxLength">Muss max. {{$v.form.TransportDemandsId.$params.maxLength.max}} Zahlen haben</div>
      </b-col>
    </b-row>
</b-form-group>

    </b-card>
    <div style="height:15px"></div>

<b-row align-h="center">
<div>
  <b-button-toolbar key-nav>
    <b-button-group class="mx-2" size="lg">
      <b-button :to="{ name: 'Home' }" variant="light" class="border border-muted" ><strong class="text-muted">&laquo;  Zurück</strong></b-button>
    </b-button-group>

    <b-button-group class="mx-2" size="lg">
      <b-button
            @click="$bvModal.show('modal-1')"
            variant="light" class="border border-muted">
        <strong class="text-muted">Delete  &raquo;</strong></b-button>
      <b-modal id="modal-1" title="Please confirm">
        <p class="my-4">Are you sure you want to delete this?</p>
        <template v-slot:modal-footer="{ ok, cancel,}">
          
      <!-- Emulate built in modal footer ok and cancel button actions -->
      <b-button size="sm" variant="success" @click="okButtonClicked()" > OK </b-button>
      <b-button size="sm" variant="danger" @click="cancel()"> Cancel </b-button>
    </template>
      </b-modal>
    </b-button-group>

  </b-button-toolbar>
</div>
</b-row>
  </b-container>
</template>

<script>
import axios from "axios";
import { required, minLength, numeric, decimal, maxLength } from 'vuelidate/lib/validators'

export default {
  name: 'DeleteForm',
  data () {
    return {
      form: { // validation der werte
        TransportDemandsId: '',
      },
    }
  },
  validations: { // validation der werte
    form: {
      TransportDemandsId: {
        minLength: minLength(1),
        maxLength: maxLength(6),
        numeric
      },
    }
  },
  methods: {
    okButtonClicked: async function() { 
      let td_id =this.form.TransportDemandsId;
      console.log(this.form.TransportDemandsId);
      let url = "https://localhost:44370/api/transportdemand/abort/" + td_id;
      const res = await axios.delete(url);      
      let data = res.data;
      
      if (data === true) {
        alert("Response: OK. Transport Demand is Deleted: " );
      } else {
        alert("Response: Transport Demand not found");
      };
      this.$bvModal.hide('modal-1');

        
      console.log("hide button");

    }
  }
}
</script>

How do you bind $bvModal ? It looks like you are calling the same method for both modals. so probably you are not making any difference between the modals. Can you add the entire code, with both modals? — Cosmin Constantin Firta
there is only one modal .i.e. b-modal. please check the attached image, it may clear more what I am trying to say. — Kamran Shakeel
@CosminConstantinFirta binding is done by bootstrap-vue plugin bootstrap-vue.org/docs/components/modal "BootstrapVue will inject a $bvModal object into every Vue instance" — kadash
So the DeleteForm component is displayed for every row of the list? — Cosmin Constantin Firta

kadash kadash · Accepted Answer · 2020-07-14T22:06:49

The reason why it happens is fact that you have defined several b-modal id="modal-1". When you have several DeleteForm components in list then as an output you will have several b-modal id="modal-1" as they are part of DeleteForm component. Then when you will run $bvModal.show('modal-1') then it will open modal for every modal defined with this id. To avoid such situation you will need to create new component for modal and you should not iterate by it. Second option is to create unique id for every modal inside the DeleteForm. You can for example pass some kind of id as a props. I hope that I described it good enough :)

OK button not working fine in Modal in Vue Js

1 Answers