[Vuejs]-Show a bootstrap modal which received on axios response after clicking the get modal button

by

0👍

✅

Firstly, using jQuery in a Vue project is a bad practice. It will work, but this is just unnecessary overhead. Vue can do what jQuery does and arguably more. I see you are already using bootstrapVue, and therefore you don’t need jQuery at all.

To answer your question, DOM updates in Vue are asynchronous. It means that when you assign this.assigntoteamform to response.data, and then proceed to show the modal, the DOM doesn’t necessarily update in that order. There is a mechanism to wait for DOM updates before doing something, via $nextTick.

Replace what you have with

export default {
  ....
  methods: {
    getAssignform() {
      this.axios({
        method: "get",
        url: "/assignig/new/456reqform",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("jkey"),
        },
      })
        .then((response) => {
          this.assigntoteamform =response.data;**
          this.$nextTick(() => { // waits for DOM to update after setting the value of this.assigntoteamform before opening the modal
            $("#assigntohandmodal").modal("show")
          })
        })
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    }
};
</script>

You can read more about Vue.$nextTick in this article

Leave a comment