我有一个问题，我想在加载Vue页面时执行一个方法。我创建了该方法，然后在created（）生命周期挂钩中对其进行了调用。我的编码方式是这样的：
backgroundColor加载页面后，该方法未执行，但是如果我先移至其他页面，然后返回包含这些代码的页面，则该方法最终被执行。
如果有人知道问题所在，我真的很愿意提出建议
谢谢
[UPDATE] ：这是我从模拟JSON数据中获取数据的方式
project.json
computed: {
...mapGetters({
projects: 'projects'
})
},
created () {
this.getProjectName()
},
methods: {
getProjectName () {
for (let index = 0; index < this.projects.value.length; index++) {
this.projectList.push(this.projects.value[index].projectName)
console.log(this.projectList[index])
}
}
}
index.js
{
"requestId": 34582764723647,
"errorMessage": null,
"errorCode": null,
"success": true,
"value": [
{
"projectId": "IDP-001",
"projectName": "Indianapolis",
"project_type": [
{
"project_id": "LOG",
"project_name": "LOGISTIC"
}
],
"duration": "5 months",
"startDate": "2018-10-17",
"endDate": "2019-02-17",
"numberOfIndividuals": 8,
"roleNeeded": [
{
"role": "Front-end developer"
}
],
"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloribus, dicta id recusandae cum fugiat",
"members": [
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0853",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0855",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
}
]
},
{
"projectId": "ORD-001",
"projectName": "X-Order",
"project_type": [
{
"project_id": "COM",
"project_name": "COMMERCE"
}
],
"duration": "5 months",
"startDate": "2018-10-17",
"endDate": "2019-02-17",
"numberOfIndividuals": 8,
"roleNeeded": [
{
"role": "Front-end developer"
}
],
"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloribus, dicta id recusandae cum fugiat",
"members": [
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "COM",
"project_name": "COMMERCE",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f08u4y5",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "COM",
"project_name": "COMMERCE",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d701748fuuu1",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "COM",
"project_name": "COMMERCE",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "0000011",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "COM",
"project_name": "COMMERCE",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "COM",
"project_name": "COMMERCE",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0858",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "COM",
"project_name": "COMMERCE",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
}
]
},
{
"projectId": "SEOUL-001",
"projectName": "Homepage Revamp",
"project_type": [
{
"project_id": "COM",
"project_name": "COMMERCE"
}
],
"duration": "5 months",
"startDate": "2018-10-17",
"endDate": "2019-02-17",
"numberOfIndividuals": 8,
"roleNeeded": [
{
"role": "Front-end developer"
}
],
"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloribus, dicta id recusandae cum fugiat",
"members": [
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
}
]
},
{
"projectId": "SIN-001",
"projectName": "Singapore UI",
"project_type": [
{
"project_id": "LOG",
"project_name": "LOGISTIC"
},
{
"project_id": "MOBILE",
"project_name": "MOBILE"
}
],
"duration": "5 months",
"startDate": "2018-10-17",
"endDate": "2019-02-17",
"numberOfIndividuals": 8,
"roleNeeded": [
{
"role": "Front-end developer"
}
],
"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloribus, dicta id recusandae cum fugiat",
"members": [
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
}
]
},
{
"projectId": "MTA-001",
"projectName": "MTA APPS",
"project_type": [
{
"project_id": "COM",
"project_name": "COMMERCE"
}
],
"duration": "5 months",
"startDate": "2018-10-17",
"endDate": "2019-02-17",
"numberOfIndividuals": 8,
"roleNeeded": [
{
"role": "Front-end developer"
}
],
"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem doloribus, dicta id recusandae cum fugiat",
"members": [
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d701748f0232",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d7dfd748f0851",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
},
{
"id": "d290f1ee-6c54-4b01-90e6-d70bgh8f0851",
"img": "http://kovus.com/working-docs/capacity/wp-content/uploads/2016/01/testi-3.jpg",
"name": "Raditia Madya",
"employement": 1,
"personality": "ESTJ",
"email": "gusti.madya@gdn-commerce.com",
"status": 1,
"records": {
"records_id": "d290f1ee-6c54-4b01-90e6-d701748f0851",
"records_domain_score": 5,
"records_technical_score": 5,
"project_history": [
{
"project_id": "LOG",
"project_name": "LOGISTIC",
"reviews": {
"responsibility": 4,
"communication": 4,
"team_work": 3,
"problem_solving": 5,
"leadership": 4,
"personality": 4,
"domain": 4,
"technical": 3
}
}
]
},
"role": "Front-end developer"
}
]
}
]
}
store.js
import recommendations from './data/recommendations.json'
import projects from './data/projects.json'
import members from './data/members.json'
const fetch = (mockData, time = 0) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(mockData)
}, time)
})
}
export default {
fetchRecommendations () {
return fetch(recommendations, 1000)
},
fetchProjects () {
return fetch(projects, 1000)
},
fetchMembers () {
return fetch(members, 1000)
}
}