代码之家 › 专栏 › 技术社区 › Notbad

如何在装入的事件中为Vue组件数据成员赋值[重复]

vue-component vuejs2 vue.js javascript

Notbad · 技术社区 · 7 年前

这个问题已经有了答案:

VueJS: why is “this” undefined? 2个答案

我一直在阅读Vue文档并开始编写一些代码来测试我的知识。我试图编写一个组件,该组件在装入时设置数据成员,但似乎无法按预期工作。组件数据成员“profiles”始终为空。我的直觉告诉我这可能与范围有关,但不确定:

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页

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

有人知道发生了什么吗?

事先谢谢。

2 回复 | 直到 7 年前

Max Sinev 7 年前

不要声明Vue挂钩、方法等 作为箭头函数 . 箭头函数使用 this 从起源上下文。

arrow函数没有自己的this;将使用封闭执行上下文的此值。

应该使用方法定义语法或函数声明才能使用 这 作为Vue实例:

mounted: function() {
    //do something
}

或

mounted() {
    //do something
}

见 Vue docs 请注意在该部分的底部。

slumbergeist 7 年前

你偶然发现了Vuejs的反应之一 caveats . 基本上,您正在以Vuejs无法响应的方式替换原始配置文件,因此它不会得到更新。

注意到数组中的更改的一种方法是,首先将数据属性指定为空,然后在装入的方法中指定一个数组。另一种稍后更新反应式数组的方法是使用数组突变方法(如push)或非突变方法(如map)生成新数组,并用新数组替换旧数组。

Vue.component('profile-grid', {
    template: `
        <section> 
          <div>{{profiles && profiles.length ? profiles : ''}} </div>
          <div>{{profilesTwo && profilesTwo.length ? profilesTwo : ''}}</div>
        </section>`,
    data () {
        return {
            profiles: null,
            profilesTwo: []

        };
    },
    created () {
        //console.log("I was just created")
    },
    mounted () {
        //console.log("I was just mounted")
        this.profiles = ['1', '2', '3'];  
        this.profilesTwo = ['5', '4', '6'].map(item => item)   
    }

});

new Vue({
    el:'#app',
    data () {
      return {}
    },
    mounted () {
      console.log('vue instance mounted');
    } 
});

<script src="https://unpkg.com/vue"></script>

<main id="app">
    <profile-grid></profile-grid>
</main>