FRAMEWORKS

FRONT

Pensando en componentes

Divide y vencerás

Este contenedor podría ser nuestro App.vue

Divide y vencerás

Esto podría ser un componente, que se encarga de cargar y mostrar el listado de commits CommitsList.vue o CommitsLoader.vue

Divide y vencerás

Esto podría ser un componente, que se encarga de cargar y mostrar el listado de ramas BranchesSelector.vue

Divide y vencerás

Esto podría ser un componente, que se encarga de recibir un objeto de tipo commit y representarlo en la pantalla Commit-item.vue

Teóricamente

<div id="app">
    <h2>últimos commits del repo</h2>
    <branches-selector/>
    <commit-list/>

</div>

Nuestro App.vue

<div class="branches">
    <div class="branch"
        v-for="branch in branches">
        <input type="radio">
        <label>{{branch.name}}</label>
    </div>
</div>

Nuestro BranchesSelector.vue

<div class="commits">
    <div class="commit"
        v-for="commit in commits">
        <commit-item></commit-item>
    </div>
</div>

Nuestro CommitList.vue

<div class="commit">
       <!-- all the display -->
</div>

Nuestro CommitItem.vue

Usando componentes

<div id="app">
    <h2>últimos commits del repo</h2>
    <branch-selector/>
    <commit-list/>

</div>

Nuestro App.vue

Recuerda que tendrás que declarar en el módulo de el App.vue que se están usando dos componentes


import CommitList from './components/CommitList';
import BranchSelector from './components/BranchSelector';

export default {
  name: 'App',
  components: {
    CommitList,
    BranchSelector
  },
};

Comunicar un componente con otro

<div class="commits">
    <div class="commit"
        v-for="commit in commits">
        <commit-item></commit-item>
    </div>
</div>

Necesitas indicarle al componente <commit-item> que quieres que trabaje y dibuje un determinado commit que tu te has encargado de encontrar y que de hecho está dando vueltas en el v-for

props

<div class="commits">
    <div class="commit"
        v-for="commit in commits">
        <commit-item :dato="commit">
        </commit-item>
    </div>
</div>

<template>
    <h2> El nombre del commit {{ dato.name }} </h2>
</template>
<script>
export default {
    name : 'commit-item',
    props : [ 'dato' ]
}
</script>

props

<div class="commits">
    <div class="commit"
        v-for="commit in commits">
        <commit-item :dato="commit">
        </commit-item>
    </div>
</div>

De esta manera le estamos pasando como atributo o como propiedad al componente <commit-item> nuestro objeto o variable commit y el nombre del atributo que hemos usado ha sido 'dato'

Pregunta: ¿por qué he puesto los : ?

props

<template>
    <h2> El nombre del commit {{ dato.name }} </h2>
</template>
<script>
export default {
    name : 'commit-item',
    props : [ 'dato' ]
}
</script>

De esta manera, si el componente quiere usar y acceder a ese commit que le han pasado, el ha de indicar que le llega una propiedad externa con el nombre "dato" para poder usarla

props

Probamos esto con el todo-list en directo

Comunicación de dentro hacia afuera

<!-- Esto sería en el fichero list.vue -->
<div class="lista">
    <list-item  :item="item" v-for="item in items" /> 
</div

<!-- Esto sería en el fichero list-item.vue -->
<div class="item">
  <span>{{item.name}} x {{item.price}}</span>
  <button @click="borrarAEste(item.name)">Borrar</button>
</div>

<!-- Esto sería en el fichero list.vue -->
<div class="lista">
    <list-item  
           :item="item" 
           v-for="item in items"
           v-on:borrarFruta="doThis"
    /> 
</div>

methods : {
   doThis (nombreFruta) {
        console.log(nombreFruta)
    }
}

Paso 1. Definimos un evento


<div class="item">
  <span>{{item.name}} x {{item.price}}</span>
  <button 
    @click="$emit('borrarFruta', item.name)">Borrar</button>
</div>

Paso 2. Ejecutamos/emitimos ese evento en el componente hijo

<div class="item">
  <span>{{item.name}} x {{item.price}}</span>
  <button 
    @click="$emit('borrarFruta', item.name)">Borrar</button>
</div>

Resultado final

<div class="lista">
    <list-item  
           :item="item" 
           v-for="item in items"
           @borrarFruta="doThis"
    /> 
</div>

Completamos el ejercicio hasta que funcione :)

Siguiente ejercicio en grupo

ENLACE

Completamos el ejercicio hasta que funcione :) Nos creamos nuestra api

V2.0 Lo mismo pero con API

https://retool.com/api-generator

ENLACE NUEVO

Continuamos con nuestros proyectos.

Avanzamos con la parte de WebApp