gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:29:22 25 4
gpt4 key购买 nike

<分区>

我一直在阅读 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>

有人知道发生了什么吗?

提前致谢。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com