VueJS modal displaying data acts strangely

Question

VueJS modal displaying data acts strangely

While using vueJS and Laravel, I encountered an issue with my modal losing its shape when I tried to display data in it. Even duplicate forms failed to show the data correctly. This occurred when I clicked on a button to open the modal and show the data.

https://i.sstatic.net/z7f3X.png

Additionally, I have a function in vue that takes a parameter, and I want to be able to click on a button in my table to display data related to an assistance and then show its actions.

<tr v-for="data in datosAsistencia" :key="data.codAsistencia">
                <td>{{ data.codAsistencia }}</td>
                <td>{{ data.codContrato }}</td>
                <td>{{ data.fecha }}</td>
                <td>{{ data.mensaje }}</td>
                <td>{{ data.nombre }}</td>
                <td>
                    <select @change="cambiarEstado(data.codAsistencia, $event)">
                        <option value="0" selected>{{data.estado}}</option>
                        <option value="en_proceso">En proceso</option>
                        <option value="finalizada">Finalizada</option>
                    </select>
                </td>
                <td><a href="#" class="btn btn-info" data-toggle="modal" data-target="#create" @click="visualizar(data.codAsistencia)">Visualizar</a></td>

The weirdest part is that if I start changing tabs in the tabPane, the modal shows up correctly in the end. I am not sure why this happens. Any help would be greatly appreciated.

javascript laravel vue.js bootstrap-4 modal-dialog

Answer 1

Answer №1

Utilizing VueJS while still thinking in jQuery mode can be a challenge. One of the key advantages of VueJS is its model-binding feature, which automatically updates the view with any changes to the data.

Here is an example that may help. The data is connected to the v-model, ensuring that it updates seamlessly when the "selected" property is modified as declared.

<table>
<tr v-for="data in datosAsistencia" :key="data.codAsistencia">
    <td>{{ data.codAsistencia }}</td>
    <td>{{ data.codContrato }}</td>
    <td>{{ data.fecha }}</td>
    <td>{{ data.mensaje }}</td>
    <td>{{ data.nombre }}</td>
    <td>
        <a href="#" class="btn btn-info" data-toggle="modal" data-target="#create" @click="visualizar(data.id)">Visualize</a>
    </td>
</tr>
</table>
<div class="modal" v-if="selected">
    <label>Name</label>
    <input type="text" v-model="selected.nombre">
</div>
<script>
export default {
    data() {
        return {
            selected: null
        }
    },
    methods: {
        visualizar(id) => {
            let url = "/getDatosAsistencia/"+ id;
            axios
                .get(url)
                .then((response) => {
                    this.selected = response.data[0]
                }
        }
    }
}
</script>

Answer 2

Utilizing VueJS while still thinking in jQuery mode can be a challenge. One of the key advantages of VueJS is its model-binding feature, which automatically updates the view with any changes to the data.

Here is an example that may help. The data is connected to the v-model, ensuring that it updates seamlessly when the "selected" property is modified as declared.

<table>
<tr v-for="data in datosAsistencia" :key="data.codAsistencia">
    <td>{{ data.codAsistencia }}</td>
    <td>{{ data.codContrato }}</td>
    <td>{{ data.fecha }}</td>
    <td>{{ data.mensaje }}</td>
    <td>{{ data.nombre }}</td>
    <td>
        <a href="#" class="btn btn-info" data-toggle="modal" data-target="#create" @click="visualizar(data.id)">Visualize</a>
    </td>
</tr>
</table>
<div class="modal" v-if="selected">
    <label>Name</label>
    <input type="text" v-model="selected.nombre">
</div>
<script>
export default {
    data() {
        return {
            selected: null
        }
    },
    methods: {
        visualizar(id) => {
            let url = "/getDatosAsistencia/"+ id;
            axios
                .get(url)
                .then((response) => {
                    this.selected = response.data[0]
                }
        }
    }
}
</script>

Answer 3

Answer №2

I successfully solved the issue I was facing. Could someone help me with the @JoeGalind, I encountered a problem with duplication of data in my modal due to a for-each loop I used with jQuery. I have since removed the for-each loop.

Answer 4

I successfully solved the issue I was facing. Could someone help me with the @JoeGalind, I encountered a problem with duplication of data in my modal due to a for-each loop I used with jQuery. I have since removed the for-each loop.

VueJS modal displaying data acts strangely

Answer №1

Answer №2

Similar questions

rely on a fresh event starting at one

The post method in Express.js is having difficulty parsing encoded data accurately

React-dom is throwing a hook call error. How do I fix this?

Clear navigation bar on top of a backdrop picture

I am unable to access the information from a .txt file using Ajax

Turn off Chrome 69's autofill functionality

The MongoDB object type is not stored

How can I retrieve values of selected checkboxes using the Express Data API?

In my app.post request in node.js and express, the body object is nowhere to be found

What is the best way to implement CSS styling in the existing Vue.js template?

When attempting to add objects to an indexedDB object store, an InvalidStateError is encountered

When using React.js, clicking on an answer option will change the color of all options, not just the one that was clicked

Injecting variables into the password reminder email in Laravel: a step-by-step guide

The JavaScript confirm function will provide a false return value

What steps should I take to address this 'key' alert?

Having difficulty in focusing on a textarea upon page initialization

Is there a way to maintain the checked status of the checkboxes after a page refresh?

Tips for preventing tiny separation lines from appearing above and below unordered list elements

Is there a way to transform the searchParams function into an object? Changing from URLSearchParams { 'title' => '1' } to { title : 1 }

Display the table upon completion of the form submission