Javascript 在vueJS表中加载数据

我有一个问题，就是如何将数据库中的数据加载到由im 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

组件

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

身份证件
名义
电子邮件
迪雷西恩
逆反
{{usuario.id}
{{usuario.nombre}}
{{usuario.email}
{{usuario.direccion}
{{usuario.password}}
导出默认值{
数据（）{
返回{
Datosuario:[]，
};
},
已创建：函数（）{
这个。cargar（）；
},
方法：{
卡加：函数（）{
让url=“/GetDatoPersonales”；
axios
.get（url）
。然后（（响应）=>{
this.datosuario=response.data；
console.log（this.datosuario）；
})
.catch（（错误）=>console.error（错误））；
},
},
};

我的问题是在这个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>

[Vue warn]：“数据”选项应该是在组件定义中返回每个实例值的函数。
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@app.js:43037
/resources/js/app.js@app.js:49878
__webpack_require__@app.js:20
0@app.js:50103
__webpack_require__@app.js:20
（匿名）@app.js:84
（匿名）@app.js:87
app.js:38441[Vue warn]：属性或方法“Datosuario”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
发现于
--->位于resources/js/components/datosuarios.vue

在这里，您的组件正在该组件中查找

datosuario

变量，这就是为什么您要获得该错误以修复此问题

组成部分

身份证件
名义
电子邮件
迪雷西恩
逆反
{{usuario.id}
{{usuario.nombre}}
{{usuario.email}
{{usuario.direccion}
{{usuario.password}}
导出默认值{
数据（）{
返回{
Datosuario:[]，
};
},
已创建：函数（）{
这个。cargar（）；
},
方法：{
卡加：函数（）{
让url=“/GetDatoPersonales”；
axios
.get（url）
。然后（（响应）=>{
this.datosuario=response.data；
})
.catch（（错误）=>console.error（错误））；
},
enviar（）{
让url=“/installezardatos”；
axios
.post（网址：{
id:this.id，
nombreUsuario：这个，nombreUsuario，
电子邮件：this.email，
密码：this.password，
迪雷西翁：这个，迪雷西翁，
})
.然后（功能（响应）{
this.arrayTasks=response.data；
})
.catch（函数（错误）{
console.log（错误）；
});
},
},
};

---

并删除函数表单

app.js

谢谢您的时间和回复，但我在控制台中有这条消息和您的代码。我将我的问题编辑成新消息谢谢你的回复。现在该组件已经创建，但所有数据都是{usuario.id}{usuario.nombre}{usuario.email}{usuario.direccion}{usuario.password}并且重复了您的代码错误。我现在修复了这些检查。我用您的回答编辑了我的问题。我可以在函数中看到一个错误，就是函数enviar。这个函数应该被删除，因为函数不应该在这里，这个函数是我点击其他按钮时使用的。但现在应该被移除。对不起我的错误。在控制台中，我遇到了下一个问题[Vue warn]：渲染中的错误：“TypeError:无法读取属性'id'of null”，在-->at resources/js/components/datosuarios.Vue中找到，基于这些组件的移动方法不放在一个组件中。您已经发生了很多错误，请尝试读取文档

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