Primero definí Tipos, Severidades y Estados como [] y los devolví en data().
Luego los llené con datos en los métodos getTypes(), getSeverities() y getStatuses().
Quiero usar Tipos, Severidades y Estados en el método getName() (solo tiene console.log() como ejemplo por ahora).
Noté que al depurar getNames(), el tipo en el segundo bucle for no está definido. ¿Es porque el método usa Type antes de que se le asignaran valores en getTypes()? ¿Cómo puedo hacer que funcione?
Nota: los tipos, las gravedades y los estados obtienen valores asignados en los métodos getTypes(), getSeverities() y getStatuses(), el problema es cómo usar los datos en otros métodos.
<script> import IssuesTable from '../MyIssuesPage/IssuesTable.vue' import AddIssue from '../MyIssuesPage/AddIssue.vue' import axios from 'axios' export default { props: ['id', 'project', 'issuesList', 'index'], components: { IssuesTable, AddIssue }, data() { return { Issues: this.issuesList[this.index], tab: null, items: [{ tab: 'Issues' }, { tab: 'Calender' }, { tab: 'About' }], Types: [], Severities: [], Statuses: [], } }, setup() { return { headers: [ { text: 'Title', value: 'title' }, { text: 'Description', value: 'description' }, { text: 'Estimate', value: 'time_estimate' }, { text: 'Assignees', value: 'userid' }, { text: 'Type', value: 'issueTypeId' }, { text: 'Status', value: 'issueStatusId' }, { text: 'Severity', value: 'issueSeverityId' }, ], } }, mounted() { this.getTypes(), this.getSeverities(), this.getStatuses(), this.getNames() }, methods: { getTypes() { axios .get('http://fadiserver.herokuapp.com/api/v1/my-types') .then(response => { this.Types = response.data }) .catch(error => { console.log(error) }) }, getSeverities() { axios .get('http://fadiserver.herokuapp.com/api/v1/my-severities') .then(response => { this.Severities = response.data }) .catch(error => { console.log(error) }) }, getStatuses() { axios .get('http://fadiserver.herokuapp.com/api/v1/my-status') .then(response => { this.Statuses = response.data }) .catch(error => { console.log(error) }) }, getNames() { for (var issue of this.Issues) { for (var type of this.Types) { if (issue.issueTypeId == type.id) console.log('test') } } }, }, } </script>En primer lugar, use created() en lugar demounted() para llamar a métodos que obtienen datos.
A continuación, debe llamar a getNames() solo después de que se completen todos los métodos de obtención.
created() { this.getTypes() .then(this.getSeverities()) .then(this.getStatuses()) .then(this.getNames()); } Para encadenar métodos como este, debe colocar la declaración de devolución antes de cada axios como este
getTypes() { return axios .get("https://fadiserver.herokuapp.com/api/v1/my-types") .then((response) => { this.Types = response.data; }) .catch((error) => { console.log(error); }); } En este componente, veo que está recibiendo issuesList de index y lista de problemas desde el exterior. No puedo conocer esos valores, pero puede consolar. Registrar ambos dentro de created() y ver qué sucede porque issuesList[index] no está undefined .
Eso probablemente significa que issuesList es una matriz y ese index no existe en esa matriz.