[Vuejs]-How to open Bootstrap 4 modal on first click instead of second click using Vue.js

by

0👍

you don’t need to write return true here instead

methods: {
            edit(userId) {

                axios.get(`user/${userId}`)
                    .then(response => {
                        this.info = response.data
                        this.showEdit = true
                    }).catch(error => {
                        console.log(error)
                    })

            }
        }

this should work.

0👍

The first click probably doesn’t work because if you use v-if the component doesn’t exists in the dom until the condition is truthy. In this case, the button data-target and data-toggle will not exist until this.showEdit is true.

The first time you click the button this.showEdit is false until you get the response and the second time you click the button this.showEdit is true because you already got a response earlier but the data are probably outdated until you get the second response.

The solution i would use is to set showEdit true on click and then just pass the userId to your modal as a prop and fetch the data on ready/mounted hook of the modal component and then fill your info.

And by the way, i think your button data-target and your modal id should match.

0👍

have you tried with “v-show” instead

<edit-modal
        v-show="showEdit"
        :info="info"/>

Leave a comment