使用 laravel 和 vueJS 将数据发送到模态答案

【问题标题】：send data to modal with laravel and vueJS使用 laravel 和 vueJS 将数据发送到模态
【发布时间】：2020-10-21 11:59:00
【问题描述】：

我正在准备将我的数组数据的数据发送到一个模式，但总是在 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

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

我在互联网上展示了很多如何做到这一点的例子，但我做不到。

感谢所有帮助

我的实际代码是：

componentVUE

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

【问题讨论】：

您没有在 Vue 代码的任何地方的属性中定义 nombreUsuario。 Vue 对未定义的属性非常挑剔。
感谢您的回复。但是必须在哪里定义我的财产¿？因为你有一个回报，总是返回这个消息。我出局了，但总是这个消息
实际上，我不确定它是在抱怨:nombreUsuario 还是"nombreUsuario"。你想在那里做什么？你可能想要v-model 而不是:numbreUsuario
我想发送到我的模态 nombreUsuario

标签： javascript php laravel vue.js

【解决方案1】：

将信息传递给模态框的最简单方法是通过函数传递信息并将其存储在 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>

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

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

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

【讨论】：