Untitled

<template>
  <div>
    <h1>Dati dalla Tabella</h1>
    <ul>
      <li v-for="row in tableData" :key="row.id">
        {{ row.nome }} - {{ row.valore }}
        <button @click="aggiornaValore(row.id)">Aggiorna Valore</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { createClient } from '@supabase/supabase-js';

export default {
  data() {
    return {
      supabase: createClient('tuo_url_progetto', 'tua_chiave_api'),
      tableData: [],
    };
  },
  created() {
    this.caricaDati();
  },
  methods: {
    async caricaDati() {
      const { data, error } = await this.supabase
        .from('nomedellatua_tabella') // Sostituisci con il nome della tua tabella
        .select('*');
      
      if (error) {
        console.error('Errore durante il caricamento dei dati:', error);
        return;
      }

      this.tableData = data;
    },
    async aggiornaValore(id) {
      const { data, error } = await this.supabase
        .from('nomedellatua_tabella') // Sostituisci con il nome della tua tabella
        .update({ valore: 'Nuovo Valore' }) // Sostituisci con il valore che desideri impostare
        .eq('id', id);
      
      if (error) {
        console.error('Errore durante l\'aggiornamento del valore:', error);
        return;
      }

      // Dopo l'aggiornamento, ricarica i dati per riflettere i cambiamenti
      this.caricaDati();
    },
  },
};
</script>