load data in table vueJS

Question

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>

Kamlesh Paul · Accepted Answer · 2020-10-21 09:45:25Z

1

here you Component is looking for datosUsuario variable inside that component that's why your getting that error to fix this

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;
                })
                .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

edited Oct 21, 2020 at 9:45

answered Oct 21, 2020 at 9:27

Kamlesh Paul

12.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

scorpions Over a year ago

thanks for your time and response, but i have this message in console with your code. i edited my question for new message

scorpions Over a year ago

thanks for your response. now the component is created, but all data is @{usuario.id} @{usuario.nombre} @{usuario.email} @{usuario.direccion} @{usuario.password} and repeated

Kamlesh Paul Over a year ago

there was error on your code i fixed those check now

scorpions Over a year ago

i edited my question with your response. I can see a error for me in function, is function enviar. this function should be removed, because function don´t should be here, this function was for when i clicked in other button. but now sould be removed. Sorry for my error. in console, i have the next problem [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of null" found in ---> <Formularioactualizacion> at resources/js/components/datosUsuarios.vue <Root>

Kamlesh Paul Over a year ago

move methods based on there component don't put in one component you have done so many error so try to read doc vuejs.org/v2/guide

|

Collectives™ on Stack Overflow

load data in table vueJS

1 Answer 1

Component

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Component

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related