形成 laravel 和 vueJS

Posted 2023-02-23

【中文标题】形成 laravel 和 vueJS

【英文标题】：form laravel and vueJS

【发布时间】：2021-02-03 11:11:01

【问题描述】：

我正在尝试使用 vueJS 和 laravel 创建一个表单。现在我可以使用组件 vue 创建表单，但我的问题是，我不知道如何将控制器中为查询返回的信息传递给组件 vue。

在带有 $user 的刀片中我可以，但在 vueJS 中我不知道如何。

我在控制台中的属性也有问题。

非常感谢你的帮助

在控制台中

    [Vue warn]: Property or method "direccion" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

组件 vueJS

<form>
            <input type="hidden" v-model="token">
            <div class="form-row">
                <div class="col">
                    <label for="email">Nombre</label>
                    <input type="text" v-model="nombreUsuario" class="form-control" >
                </div>
                <div class="col">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" v-model="email" aria-describedby="emailHelp">
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <label for="password">Contraseña</label>
                    <input type="password" class="form-control" v-model="password">
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <label for="direccion">Direccion</label>
                    <textarea v-model="direccion" class="md-textarea form-control" rows="3">
                        
                    </textarea>
                    <input type="hidden" v-model="id">
                </div>
            </div>
            <!-- EMPEZAMOS LA FUNCIONALIDAD CON VUE DE ESTA MANERA LE DAMOS FUNCIONALIDAD AL BOTON-->
            <button class="btn btn-primary mt-5" type="submit">Actualizar</button>
        </form>

</template>

<script>
    export default
        mounted()
            console.log('component mounted.')
        
    
</script>

app.js

require('./bootstrap');

window.Vue = require('vue');


Vue.component('usuarios-component', require('./components/usuariosComponent.vue').default);
Vue.component('formularioactualizacion', require('./components/datosUsuarios.vue').default);


// inicio de VUE

    const app = new Vue(
        el: '#contenedorVue',
        //components: usuario,
        data:
                id: '',
                nombreUsuario: '',
                email: '',
                password: '',
                direccion: '',
                token: '',
                arrayTasks:[],
            ,
            methods: 
                enviar()
                    let url = '/actualizarDatos';
                    axios.post(url, 
                        id: this.id,
                        nombreUsuario: this.nombreUsuario,
                        email: this.email,
                        password: this.password,
                        direccion: this.direccion,
                        _token: this.token,
                    ).then(function(response)
                        this.arrayTasks = response.data;
                        console.log("aquí"+response);
                    ).catch(function(error)
                        console.log(error);
                    )
                
            
        );

homeController

 public function datosPersonales($cod_usuario)
    $usuario = \Auth::user();
    
return view('datosPersonales')->with("usuario", $usuario);

修改

我更改了我的代码。

路线

// ruta para obtener los datos del usuario que está en la sesion
Route::get('/datosPersonales', function()
    $user = Auth::user();
    return response()->json($user);
);

//ruta para cargar la vista
Route::get('/datosPersonalesView', 'HomeController@datosPersonales')->name('datosPersonales');

编辑

查看

@extends('layouts.app')
@section('content')

    @include('layouts.sidebar')

    <!-- SE ESTABLECE V-MODEL para usarlo con vue, es como el ID -->
    <div id="contenedorVue" class="d-flex flex-row justify-content-center">


        <!-- este formulario se crea desde VUEJS -->
        <formularioactualizacion :id="id" :nombreUsuario="nombreUsuario"></formularioactualizacion>
    </div>
@endsection

file.vue

<

template>
            
        <pre>
            id
            nombreUsuario
        </pre>


</template>

<script>
    export default
        props: ['id', 'nombreUsuario']
    
</script>

【问题讨论】：

您可以通过 props 将值传递给组件。这是文档。 vuejs.org/v2/guide/components-props.html

【参考方案1】：

对于[Vue Warn]

// data: should be 

data() 
    return  
        // your data object here 
    

对于来自 Laravel 的 AJAX 响应，您需要创建一个返回 JSON 响应的路由。

见：https://laravel.com/docs/8.x/responses#creating-responses

例子：

Route::get('/tasks', function () 
    $user = Auth::user();
    return response()->json($user);
);

要将这些数据传递到组件中，您需要使用props

https://vuejs.org/v2/guide/components-props.html

示例道具

要设置一个道具，像这样添加user 变量。

<my-component :user="user" />

组件

<template>
    <pre> user </pre>
</template>

export default 
    props: ['user'] // Define the prop here, which is now reactive

【讨论】：

感谢您的回复，但我如何才能通过返回视图的路线返回响应¿？我需要创建另一条路线¿？

如果要保持当前路由不变，则需要创建另一个路由，如果页面仅用于 AJAX 请求，则无需返回view

好的，但抱歉我不太明白，因为实际上在我的路线中，我正在查询 ger 数据用户...如果我使用您的回复，我不知道如何我可以获取用户数据

我已将用户添加到响应中。它将返回用户的信息。

非常感谢您的回复和您的时间。我所有的更改都是静态的，我想说的是我在 app.js 中输入了值。但如果我想加载到数据库¿???