[Vuejs]-Send data to modal with laravel and vueJS

by

0👍

✅

The easiest way to pass information to a modal is to pass it through a function and store it in a Vue property. First, in your loop, change your button to this:

<td><a href="#" class="btn btn-info" data-toggle="modal" data-target="#create" @click="setSelectedItem(datosUsuario)">Editar</a></td>

Then you want to add both the property and the method:

<script>

    export default {
        data() {
            return {
                datosUsuario: [],
                isOpen: false,
                selectedItem: {}
            };

        },
        created: function () {
            this.cargar();
        },
        methods: {
            cargar: function () {
                let url = "/getDatosPersonales";
                axios
                    .get(url)
                    .then((response) => {
                        this.datosUsuario = response.data;
                    })
                    .catch((error) => console.error(error));
            },
            setSelectedItem(item) {
                this.selectedItem = item;
            }
        },
    };
</script>

Then it’s real easy to get that data back into your modal:

<div class="form-group">
    <label for="nombre">Nombre:</label>
    <input type="text" class="form-control" id="nombre" v-model="selectedItem.nombre">
</div>

You can also use the selectedItem in other functions, such as when submitting it back to the server.

Leave a comment