时间戳

首页 > 解决方案 > 如何在挂载事件中为 vue 组件数据成员赋值

javascript - 如何在挂载事件中为 vue 组件数据成员赋值

问题描述

我一直在阅读 vue 文档并开始编写一些代码来测试我的知识。我试图编写一个在安装时设置数据成员的组件，但它似乎没有按预期工作。组件数据成员“配置文件”始终为空。我的直觉说这可能与范围有关，但不确定：

Vue.component('profile-grid', 
{
    template: '<section> {{profiles}} </section>',
    //Data es la parte privada del documento. Props la parte publica que se deberia de pasar desde la instancia Vue
    data: () =>
    {
        return {
            profiles: []
        };
    },
    methods:
    {
    },
    created: () =>
    {
        //console.log("I was just created")
    },
    mounted: () =>
    {
        //console.log("I was just mounted")
        this.profiles = ['1', '2', '3'];     
    }

})

//Vue instance
new Vue(
{
    el:'main',
    data:
    {
    },
    methods:
    {
    },
    mounted: () =>
    {
    }

});

网页

//HTML Page
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>

<body>
    <main>
        <profile-grid></profile-grid>
    </main>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="main.js"></script>

</html>

有人知道发生了什么吗？

提前致谢。

标签： javascriptvue.jsvuejs2vue-component

解决方案

不要将Vue 钩子、方法等声明为箭头函数。this从父上下文中使用箭头函数。

箭头函数没有自己的 this；使用封闭执行上下文的 this 值。

您应该使用方法定义语法或函数声明才能this用作 Vue 实例：

mounted: function() {
    //do something
}

或者

mounted() {
    //do something
}

请参阅本节底部的Vue 文档通知。

推荐阅读