0

Estoy tratando de crear un componente que contenga un formulario y este que sea llenado desde la base de datos con un controlador de laravel. Pero cuando genero el formulario, me aparece en consola lo siguiente:

    [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

He mirado el formulariopor si faltaba el v-model, pero si está. Este error me aparece para todos los inputs del formulario.

A parte, como puedo hacer mención a los placeholder de laravel en vue¿? es decir si tengo esto en laravel

{{$usuario->id}}

como lo pongo en el componente de vue para que se llene mi formulario con los datos del usuario, para posteriormente editarlos.

Gracias de antemano. adjunto mi código actual.

vueJS Este es el componente

        <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 desde el cual obtengo los datos que envío a la vista, en ella si puedo acceder a los datos

public function datosPersonales($cod_usuario){
    $usuario = \Auth::user();
    
return view('datosPersonales')->with("usuario", $usuario);
}
4
  • direccion y las demás propiedades de data que vas a usar como v-model de los inputs van en el mismo componente donde tienes el template con lo inputs. el 20 oct. 2020 a las 16:03
  • @porloscerrosΨ garacias por tu respuesta, eso estoy haciendo no¿?? en el mismo componente tengo los v-model, no¿??? es que este form, quiero crearlo dinámicamente
    – scorpions
    el 20 oct. 2020 a las 16:05
  • Por lo que veo, estás declarando la propiedad data cuando creas la instancia de Vue. A lo que iba es a que ese data va en el componente donde tienes el template con los inputs, que supongo que es formularioactualizacion, fíjate que en ese componente sólo tienes un método mounted() pero no data() el 20 oct. 2020 a las 16:20
  • perdona @porloscerrosΨ pero soy totalmente nuevo en vue y me pierdo muchísimo... No entiendo para nada como debo de enviar los valores del controlador al componente de vue
    – scorpions
    el 20 oct. 2020 a las 16:26

1 respuesta 1

0

Esto colocalo en el header de tu archivo blade que estes usando

<script>
    window.data = {
      datos: {
        "id":                  "{{$usuario->name}}",
        "nombreUsuario":       "{{$usuario->apellido}}",
        "email":               "{{$usuario->email}}"
      }

    }
</script>

y en en tu archivo vue

const app = new Vue({
el: '#contenedorVue',
//components: {usuario},
data:{
        id: data.datos.id,
        nombreUsuario: data.datos.nombreUsuario,
        email: data.datos.email,
        password: '',
        direccion: '',
        token: '',
        arrayTasks:[],
    },

y asi vas llenando dependiendo de los datos que quieres modificar.

1
  • Checa bien, el OP usa single file components y no como propones
    – user128299
    el 21 oct. 2020 a las 22:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.