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

【问题标题】：show data in modal with vueJS, does strange things使用 vueJS 以模态显示数据，做奇怪的事情
【发布时间】：2021-02-24 14:40:14
【问题描述】：

我正在使用 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。我想在我的表格中单击一个按钮并显示属于一个助手的数据，然后显示他的动作

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 中将一个选项卡更改为另一个选项卡...最后，我的模态显示正常...我不知道为什么要通过这个...

希望有人能帮帮我

【问题讨论】：

标签： javascript laravel vue.js bootstrap-4 modal-dialog

【解决方案1】：

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

【讨论】：

【解决方案2】：

您正在使用 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>

【讨论】：