Javascript 如何在装入的事件中为vue组件数据成员分配值
我一直在阅读vue文档，并开始编写一些代码来测试我的知识。我曾尝试编写一个组件，在装入时设置数据成员，但它似乎无法按预期工作。组件数据成员“profiles”始终为空。我的直觉告诉我这可能与范围有关，但不确定：Javascript 如何在装入的事件中为vue组件数据成员分配值,javascript,vue.js,vuejs2,vue-component,Javascript,Vue.js,Vuejs2,Vue Component,我一直在阅读vue文档，并开始编写一些代码来测试我的知识。我曾尝试编写一个组件，在装入时设置数据成员，但它似乎无法按预期工作。组件数据成员“profiles”始终为空。我的直觉告诉我这可能与范围有关，但不确定： Vue.component('profile-grid', { template: '<section> {{profiles}} </section>', //Data es la parte privada del documento. Pr
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: () =>
{
}
});
Vue.component（'profile-grid'，
{
模板：“{profiles}}”，
//数据来源于文档的私有部分。公共部分的支撑物来源于文档的公共部分
数据：（）=>
{
返回{
个人资料：[]
};
},
方法：
{
},
创建：（）=>
{
//log（“我刚刚被创建”）
},
挂载：（）=>
{
//log（“我刚刚挂载了”）
this.profiles=['1'，'2'，'3']；
}
})
//Vue实例
新Vue(
{
el:'main'，
数据：
{
},
方法：
{
},
挂载：（）=>
{
}
});
//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>
//HTML页面
页面标题
提前感谢。您偶然发现了一个VUEJ。基本上，您正在以Vuejs无法响应的方式替换原始配置文件，因此它不会得到更新 注意数组中的更改的一种方法是首先将数据属性指定为null，然后在mounted方法中指定一个数组。 以后可以更新反应式数组的另一种方法是使用数组变异方法（如push）或非变异方法（如map）生成新数组，并用新数组替换旧数组
Vue.component（'profile-grid'{
模板：`
{{profiles&&profiles.length？配置文件：'}}
{{profilesTwo&&profilesTwo.length？profilesTwo:''}
`,
数据（）{
返回{
配置文件：null，
profilesTwo:[]
};
},
创建（）{
//log（“我刚刚被创建”）
},
挂载（）{
//log（“我刚刚挂载了”）
this.profiles=['1'，'2'，'3']；
this.profilesTwo=['5'，'4'，'6'].map（item=>item）
}
});
新Vue({
el:“#应用程序”，
数据（）{
返回{}
},
挂载（）{
log（'vue实例已装入'）；
}
});
不要将Vue挂钩、方法等声明为箭头函数。箭头函数使用父上下文中的此
箭头函数没有它自己的函数；使用封闭执行上下文的此值
您应该使用方法定义语法或函数声明，以便能够将此mounted: function() {
//do something
}
请参阅本节底部的注意事项。您能告诉我们如何使用该组件吗？@destoryer添加了vue intsance的构造和简单的html页面测试。
mounted() {
//do something
}