Javascript 用vueJS在模态中显示数据，做一些奇怪的事情

我正在用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>

最有趣的是，如果我开始在选项卡窗格中从一个选项卡更改为另一个。。。最后，我的模态显示ok。。。我不知道为什么要通过这个

---

我希望任何人都能帮助我，请

您使用的是VueJS，但考虑的是jQuery。VueJS的妙处在于模型绑定，它可以自动刷新视图上的数据

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

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

{{data.codAsistencia}
{{data.codcontato}
{{data.fecha}}
{{data.mensaje}}
{{data.nombre}}
名义
导出默认值{
数据（）{
返回{
所选：空
}
},
方法：{
可视化（id）=>{
让url=“/getDatosAsistencia/”+id；
axios
.get（url）
。然后（（响应）=>{
this.selected=response.data[0]
}
}
}
}

我解决了我的问题。你怎么说@JoeGalind，我的model和jquery中的每个都有一个对应项…这里是我所有数据的复制位置…我删除了每个对应项

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