Supabase Vue.js

# Formularios

# views > Formulario.vue

# Componente > Formulario > BaseInput.vue

Estos componentes de formulario se explican en otro tutorial

<BaseInput 
  v-model="form.producto.title" 
  type="text" 
  label="Producto">
</BaseInput>

# Storage de archivos/imágenes

Tenemos un v-if que comprueba si tenemos una imagen que mostrar, sino pasamos al v-else que muestra un cuadrado con fondo gris

<img
  v-if="form.src"
  :src="form.src"
  class="avatar rounded mb-2"
  :style="{ height: form.size, width: form.size }">
</img>
<div
  v-else
  class="avatar bg-gray-500 bg-opacity-100 rounded-lg"
  :style="{ height: form.size, width: form.size }">
</div>

# Botón input guardar

Si no estoy editando mostramos el botón guardar v-if que permite seleccionar un archivo y agregarlo a supabase junto con los datos

<label
  v-if="form.editar === false"
  class="flex content-center btn btn-wide btn-accent"
  for="single"
>
  {{ form.uploading ? "Guardando ..." : "Guardar" }}
  <input
    style="visibility: hidden; position: absolute"
    type="file"
    id="single"
    accept="image/*"
    @change="form.subirArchivoAgregar"
    :disabled="form.uploading"
  />
</label>

# Botón input editar

Si estoy editando el botón input actualiza la imagen y dos datos

<label
  v-else="form.editar === true"
  class="flex content-center btn btn-accent"
  for="single"
>
  {{ form.uploading ? "Actualizando ..." : "Actualizar" }}
  <input
    style="visibility: hidden; position: absolute"
    type="file"
    id="single"
    accept="image/*"
    @change="form.subirArchivoActualizar"
    :disabled="form.uploading"
  />
</label>

# Tabla de elementos

Mostramos los elementos de la base de datos

# Botón editar

El botón editar obtiene los datos rellenado los campos y cambia el botón guardar por el botón Actualizar

<button
  @click.prevent="
    form.obtenerDatoId(item.id);
    form.editar = !form.editar;
  "
  class="btn btn-primary">
</button>

# Botón editar

El botón eliminar elimina los datos.

<button @click="form.eliminarDato(item.id)" class="btn btn-danger">
  Eliminar
</button>