Reputation: 171
I have a probem to load data from database into my table created im vueJS. i have created my component table and my script in app.js, but in view i can see this error:
[Vue warn]: Property or method "datosUsuario" 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Formularioactualizacion> at resources/js/components/datosUsuarios.vue
is problem to v-for that it not detect my array from script vue. i have checked my array for is empty, but not, he have data. Also i have a new route for load de data user and other for load the view and all it´s ok, but i can´t load de data into de table. I attached my actual code.
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',
created: function(){
this.cargar();
},
data: {
datosUsuario: [],
},
methods: {
cargar: function(){
let url = '/getDatosPersonales';
axios.get(url).then((response) => {
this.datosUsuario = response.data;
}).catch((error) => console.error(error));
},
enviar(){
let url = '/actualizarDatos';
axios.post(url, {
id: this.id,
nombreUsuario: this.nombreUsuario,
email: this.email,
password: this.password,
direccion: this.direccion
}).then(function(response){
this.arrayTasks = response.data;
}).catch(function(error){
console.log(error);
})
}
}
});
Component
<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>CONTRASEÑA</th>
</thead>
<tbody>
<tr v-for="usuario in datosUsuario" :key="usuario.id">
<td>{{ usuario.id }}</td>
<td>{{ usuario.nombre }}</td>
<td>{{ usuario.email }}</td>
<td>{{ usuario.direccion }}</td>
<td>{{ usuario.password }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
datosUsuario: [],
};
},
created: function () {
this.cargar();
},
methods: {
cargar: function () {
let url = "/getDatosPersonales";
axios
.get(url)
.then((response) => {
this.datosUsuario = response.data;
console.log(this.datosUsuario);
})
.catch((error) => console.error(error));
},
},
};
</script>
my problem is in component in this v-for... i´m new in vueJS, i´m traying initiate in this frameworks.
Thanks so much for help
EDIT
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
warn @ app.js:38441
./node_modules/vue/dist/vue.common.dev.js.strats.data @ app.js:39068
mergeField @ app.js:39372
mergeOptions @ app.js:39367
Vue.extend @ app.js:42959
Vue.<computed> @ app.js:43037
./resources/js/app.js @ app.js:49878
__webpack_require__ @ app.js:20
0 @ app.js:50103
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:38441 [Vue warn]: Property or method "datosUsuario" 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Formularioactualizacion> at resources/js/components/datosUsuarios.vue
<Root>
Upvotes: 0
Views: 2945
Reputation: 12401
here you Component is looking for datosUsuario
variable inside that component that's why your getting that error to fix this
<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>CONTRASEÑA</th>
</thead>
<tbody>
<tr v-for="usuario in datosUsuario" :key="usuario.id">
<td>{{ usuario.id }}</td>
<td>{{ usuario.nombre }}</td>
<td>{{ usuario.email }}</td>
<td>{{ usuario.direccion }}</td>
<td>{{ usuario.password }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
datosUsuario: [],
};
},
created: function () {
this.cargar();
},
methods: {
cargar: function () {
let url = "/getDatosPersonales";
axios
.get(url)
.then((response) => {
this.datosUsuario = response.data;
})
.catch((error) => console.error(error));
},
enviar() {
let url = "/actualizarDatos";
axios
.post(url, {
id: this.id,
nombreUsuario: this.nombreUsuario,
email: this.email,
password: this.password,
direccion: this.direccion,
})
.then(function (response) {
this.arrayTasks = response.data;
})
.catch(function (error) {
console.log(error);
});
},
},
};
</script>
and remove function form app.js
Upvotes: 1