在表 vueJS 中加载数据

Question

我有一个探针可以将数据库中的数据加载到我在 vueJS 创建的表中。我在 app.js 中创建了组件表和脚本，但在视图中我可以看到这个错误：

    [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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Formularioactualizacion> at resources/js/components/datosUsuarios.vue

是 v-for 的问题，因为它没有从脚本 vue 中检测到我的数组。我检查了我的数组是否为空，但不是，他有数据。我也有一个新的加载数据用户和其他加载视图的路径，一切都很好，但我不能将数据加载到表中。我附上了我的实际代码。

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

组件

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

我的问题出在这个 v-for 的组件中......我是 vueJS 的新手，我正在这个框架中启动托盘。

非常感谢您的帮助

编辑

    [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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Formularioactualizacion> at resources/js/components/datosUsuarios.vue
       <Root>

Answer 1

您的组件正在该组件内寻找 datosUsuario 变量，这就是您收到该错误以解决此问题的原因

组件

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

并删除函数形式app.js