Javascript 使用laravel和vueJS将数据发送到modal

我正在尝试将阵列数据的数据发送到一个模式，但始终在web控制台中，我可以看到以下消息：

 [Vue warn]: Property or method "nombreUsuario" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

在我的组件中，我正在创建一个模态，我想我可以将这些数据传递给我的模态，但我不能。 我在组件的导出deafult中声明一个变量，但总是返回一个错误

我在互联网上展示了很多这样做的例子，但我不能

我感谢所有的帮助

我的实际代码是：

组件Vue

  <template>
    <div class="tabla-usuarios">
        <table class="table table-hover table-striped">
            <thead>
                <th>Id</th>
                <th>Nombre</th>
                <th>Email</th>
                <th>Dirección</th>
                <th>Editar</th>
            </thead>
            <tbody>
                <tr>
                    <td>{{ datosUsuario.id }}</td>
                    <td>{{ datosUsuario.nombre }}</td>
                    <td>{{ datosUsuario.email }}</td>
                    <td>{{ datosUsuario.direccion }}</td>
                    <td><a href="#" class="btn btn-info" data-toggle="modal" data-target="#create">Editar</a></td>
                </tr>
            </tbody>
        </table>


        <div class="modal fade" id="create">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span>×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="nombre">Nombre:</label>
                                <input type="text" class="form-control" id="nombre" :nombreUsuario="nombreUsuario">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="text" class="form-control" id="email">
                            </div>
                            <div class="form-group">
                                <label for="direccion">Direccion:</label>
                                <input type="text" class="form-control" id="direccion">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-primary" value="Guardar">
                        </div>
                    </div>
                </div>
            </div>
        </div>


        
</template>



<script>

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

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

身份证件
名义
电子邮件
迪雷西翁
编辑
{{datosuario.id}
{{datosuario.nombre}}
{{datosuario.email}
{{datosuario.direccion}}
×
名义：
电邮：
指令：
导出默认值{
数据（）{
返回{
Datosuario:[]，
伊索彭：错，
};
},
已创建：函数（）{
这个。cargar（）；
},
方法：{
卡加：函数（）{
让url=“/GetDatoPersonales”；
axios
.get（url）
。然后（（响应）=>{
this.datosuario=response.data；
})
.catch（（错误）=>console.error（错误））；
},
},
};

将信息传递给模式的最简单方法是通过函数传递信息并将其存储在Vue属性中。首先，在循环中，将按钮更改为：

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

然后，您要同时添加属性和方法：

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

导出默认值{
数据（）{
返回{
Datosuario:[]，
伊索彭：错，
selectedItem:{}
};
},
已创建：函数（）{
这个。cargar（）；
},
方法：{
卡加：函数（）{
让url=“/GetDatoPersonales”；
axios
.get（url）
。然后（（响应）=>{
this.datosuario=response.data；
})
.catch（（错误）=>console.error（错误））；
},
setSelectedItem（项目）{
this.selectedItem=项目；
}
},
};

然后很容易将数据返回到您的模型中：

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

名义：

---

您还可以在其他功能中使用selectedItem，例如在将其提交回服务器时。

您的Vue代码中的任何位置的属性中都没有定义

nombreUsuario

。对于未定义的属性，Vue非常挑剔。感谢您的回复。但我的财产在哪里定义？？因为y有一个返回，并且总是返回此消息。我出去玩了，但总是这样。事实上，我不确定它是在抱怨

：nombreUsuario

还是

“nombreUsuario”

。你想在那里做什么？您可能想要

v-model

而不是

：numbreUsuario

我想要发送到我的模态nombreUsuario