使用 vueJS 以模态显示数据，做一些奇怪的事情

Question

我正在尝试使用 vueJS 和 Laravel 在我的模式中显示数据。但是当我点击我的按钮打开模态并显示数据时......我的模态失去了所有形状。

重复的表格也不显示正确的数据。如果我点击其他按钮显示其他对象....

我在 vue 中有一个函数，我接收一个参数...

<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>

还有我的函数 vueJS。我想点击我的 table 的一个按钮并显示属于一个助手的数据，然后显示他的动作

visualizar: function(codAsistencia){

            this.visualizarActuaciones(codAsistencia);

            let url = "/getDatosAsistencia/"+ codAsistencia;
            axios
                .get(url)
                .then((response) => {
                    $("#datosAsistenciaModal").show();
                    $("#codAsistencia").val(response.data[0]["codAsistencia"]);
                    $("#fechaAsistencia").val(response.data[0]["fecha"]);
                    $("#mensajeAsistencia").append(response.data[0]["mensaje"]);
                    $("#usuario").val(response.data[0]["nombre"]);
                    $("#estado").val(response.data[0]["estado"]);
                    $("#bono").val(response.data[0]["tipo"]);
                    $("#tiempoContratado").val(response.data[0]["tiempoRestanteBono"]);
                    $("#codBono").val(response.data[0]["codBono"]);
                    $("#codContrato").val(response.data[0]["codContrato"]);

                    $("#tiempoRestanteBono").text(response.data[0]["tiempoRestanteBono"] + " Min");

                })
                .catch((error) => console.log(error));
        },

最有趣的是我开始在 tabPane 中将一个选项卡更改为另一个选项卡...最后，我的模态显示正常...我不知道为什么要通过这个...

我希望有人能帮助我

Answer 1

您正在使用 VueJS，但您的想法是 jQuery。 VueJS 的美妙之处在于模型绑定，它会自动刷新视图上的数据。

像这样的东西应该适合你。数据绑定到 v-model 并在分配给我刚刚声明的“选定”时自动更新属性。

<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)">Visualizar</a>
    </td>
</tr>
</table>
<div class="modal" v-if="selected">
    <label>Nombre</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

我解决了我的问题。你怎么说@JoeGalind，我在我的模式中有一个 for-each 和 jquery 作为回应......这是我所有数据重复的地方......我删除了我的 for-each

使用 vueJS 以模态显示数据，做一些奇怪的事情

show data in modal with vueJS, does strange things

javascript

modal-dialog

laravel

vue.js

bootstrap-4