Recién estoy empezando con Vue.js
y encontré un video tutorial de como implementarlo con Laravel
lo cual me sirve.
Puedo acceder a los datos y mostrarlos como corresponde, pero:
<script>
export default {
// se retorna la informacion de un objeto
data(){
return{
projects: [],
form: new Form({
id: '',
name: '',
initialDate:'',
finalDate:'',
active: ''
})
}
},
methods:{
createProject(){
this.form.post('api/project');
},
loadProjects(){
axios.get("api/project").then(({ data }) => (this.projects = data));
}
},
computed:{
proActive: function(){
return this.projects
}
},
created(){
this.loadProjects();
Fire.$on('AfterCreate', () => {
this.loadProjects();
});
}
}
</script>
En estos videos trabajan de esta forma con VUE.js
, no sé si es la mejor.
Lo que necesito es que el codigo desde la función proActive pueda acceder a la variable active, pero como se ve aqui abajo tengo escrito return this.projects y me trae todos los datos de esta forma:
{ "current_page": 1, "data": [ { "id": 1, "name": "XML", "initialDate": "2019-02-06", "finalDate": "2019-11-13", "active": 1, "created_at": null, "updated_at": null }, { "id": 2, "name": "Fidelice", "initialDate": "2019-04-09", "finalDate": "2019-09-09", "active": 1, "created_at": "2019-04-09 22:26:19", "updated_at": "2019-04-09 22:26:19" } ], "first_page_url": "http://127.0.0.1:8000/api/project?page=1", "from": 1, "last_page": 1, "last_page_url": "http://127.0.0.1:8000/api/project?page=1", "next_page_url": null, "path": "http://127.0.0.1:8000/api/project", "per_page": 10, "prev_page_url": null, "to": 2, "total": 2 }
Y si cambio esto a return this.projects.data, me devuelve:
[ { "id": 1, "name": "XML", "initialDate": "2019-02-06", "finalDate": "2019-11-13", "active": 1, "created_at": null, "updated_at": null }, { "id": 2, "name": "Fidelice", "initialDate": "2019-04-09", "finalDate": "2019-09-09", "active": 1, "created_at": "2019-04-09 22:26:19", "updated_at": "2019-04-09 22:26:19" } ]
Cómo llego a este dato? Porque mi idea es que ya teniendo el dato, que va de 0 a 4 poder poner un if y dependiendo del valor devolver una palabra.
algo como:
proActive: function(){
if(this.projects.data.active == '1') return 'Activo'
}
Muchas Gracias de antemano.