Метод Vue не будет выполняться при загрузке страницы - PullRequest
Новая
       5

Метод Vue не будет выполняться при загрузке страницы

0 голосов
/ 29 декабря 2018

У меня проблема, я хочу выполнить метод всякий раз, когда загружается страница Vue.Я создал метод, а затем вызвал его в хуках жизненного цикла create ().Код, который я кодировал, был таким: 

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])
    }
  }
}

После того, как я загрузил страницу, метод не был выполнен, но если я сначала перешел на другую страницу, затем вернусь на страницу, которая содержит этот код, затемнаконец, метод был выполнен.

Если кто-нибудь знает проблему, я действительно открыт для предложений

Спасибо

[ОБНОВЛЕНИЕ] : Вот как яизвлек данные из фиктивных данных JSON

project.json 

{
  "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"
        }
      ]
    }
  ]
}

index.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)
  }
}

store.js 

import Vue from 'vue'
import Vuex from 'vuex'
import mock from '@/api/mock'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    projectList: {},
    projects: {},
    recommendations: {},
    members: {},
    projectDetail: {
      projectName: '',
      projectType: [],
      startDate: null,
      endDate: null,
      projectDescription: '',
      roleNeeded: [
        {
          label: '',
          number: ''
        }
      ]
    }
  },
  getters: {
    projectList (state) {
      return state.projectList
    },
    projectDetail (state) {
      return state.projectDetail
    },
    recommendations (state) {
      return state.recommendations
    },
    members (state) {
      return state.members
    },
    projects (state) {
      return state.projects
    }
  },
  mutations: {
    setProjectList (state, value) {
      state.projectList = value
    },
    setProjectDetail (state, value) {
      state.projectDetail = value
    },
    setRecommendations (state, value) {
      state.recommendations = value
    },
    setMembers (state, value) {
      state.members = value
    },
    setProjects (state, value) {
      state.projects = value
    },
    setStartDate (state, value) {
      state.startDate = value
    },
    setEndDate (state, value) {
      state.endDate = value
    }
  },
  actions: {
    getRecommendations ({ commit }) {
      return mock
        .fetchRecommendations()
        .then(recommendations => commit('setRecommendations', recommendations))
    },
    getMembers ({ commit }) {
      return mock
        .fetchMembers()
        .then(members => commit('setMembers', members))
    },
    getProjects ({ commit }) {
      return mock
        .fetchProjects()
        .then(projects => commit('setProjects', projects))
    }
  }
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...