WIP

src/views/Barcas.vue

@@ -16,14 +16,14 @@
     <nav class='inline-nav'>
       <a href='#'
         :class='{ active: filtro === Filtros.ABORDADAS }'
-         @click.prevent="e => filtro = Filtros.ABORDADAS"
+         @click.prevent="e => _filtro = Filtros.ABORDADAS"
         >Abordadas</a>
       <a href='#'
         :class='{ active: filtro === Filtros.A_ABORDAR }'
-         @click.prevent="e => filtro = Filtros.A_ABORDAR"
+         @click.prevent="e => _filtro = Filtros.A_ABORDAR"
         >A abordar</a>
     </nav>
-    <div class='lista-barcas' v-if='barcasFiltradas'>
+    <div class='lista-barcas' v-if='barcasFiltradas.length > 0'>
       <barca
         :barca='barca'
         :key='barca.id'
@@ -31,6 +31,14 @@
         :updateKey='updateKey'
         v-for='(barca, index) in barcasFiltradas' />
     </div>
+    <div class='lista-barcas' v-else-if='barcasFiltradas'>
+      <template v-if='filtro === Filtros.ABORDADAS'>
+        No abordaste ninguna barca.
+      </template>
+      <template v-else>
+        Ya estas en todas las barcas :)
+      </template>
+    </div>
     <template v-else-if='error'>
       Error: {{ error }}
     </template>
@@ -58,7 +66,7 @@ export default {
       loading: true,
       updateKey: 0,
       Filtros,
-      filtro: Filtros.ABORDADAS,
+      _filtro: Filtros.ABORDADAS,
       colors: ['#FD5051', '#FFA959', '#FFF661', '#61EF94', '#6FBEFB', '#9063E9'],
     }
   },
@@ -70,6 +78,11 @@ export default {
           ({ abordada }) => this.filtro === Filtros.ABORDADAS ? abordada : !abordada
         )
     },
+    filtro () {
+      const barcasAbordadas = this.barcas.filter(({ abordada }) => abordada)
+      console.log(Filtros.A_ABORDAR, this._filtro)
+      return barcasAbordadas.length > 0 ? this._filtro : Filtros.A_ABORDAR
+    },
   },
   methods: {
     refrescar() {
@@ -85,9 +98,9 @@ export default {
     },
   },
   watch: {
-    filtro () {
-      this.refrescar()
-    },
+    //filtro () {
+      //this.refrescar()
+    //},
   },
   mounted() {
     // fetch data