1

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.

1 respuesta 1

1

Esta es la parte linda de programar, cuando encuentras la respuesta solo xD.

lo que hice fue crear un filtro con Vue.js

Dentro del código que se maneja en app.js tuve que poner:

Vue.filter('ActivePro', function(text){
  if(text == '0') return 'Inactivo'
  if(text == '1') return 'Activo'
  if(text == '2') return 'Pausado'
  if(text == '3') return 'Terminado'  
})

De esta forma a medida que se vaya poblando la tabla y dependiendo del valor este va a ir cambiando:

el código de mi tabla quedó así

<tr v-for="project in projects.data" :key="project.id">
   <td>{{ project.id }}</td>
   <td>{{ project.name }}</td>
   <td>{{ project.initialDate }}</td>
   <td>{{ project.finalDate }}</td>
   <td>{{ project.active | ActivePro }}</td>
   <td>
      <a href="#">
        <i class="far fa-edit green fa-lg iconom"></i>
      </a>
      <a href="#">
        <i class="far fa-trash-alt red fa-lg iconom"></i>
      </a>
   </td>
 </tr>
1
  • Marca la respuesta como aceptada haciendo click en el check verde del costado, de esta manera colaboras con la buena salud del sitio, efecto de % de preguntas resueltas :D
    – fredyfx
    Commented el 14 oct. 2019 a las 23:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.