形成 laravel 和 vueJS

Question

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

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