1

So I've been trying to get some values from a postgres db with postgREST, show them in a table with vuetify and have checkboxes next to every value so that the user can delete a row from the table.

My problem is I don't know how to get the selected values from the checkbox, or even better only the ID column and use them in my script.

My html:

<template>
  <p v-if="state == 'error' " class="red">{{ error }}</p>

  <div v-else-if="state == 'ready' ">
      <div id="app">
          <v-app id="inspire">
                                  
            <button style="font-face: 'Comic Sans MS'; font-size: larger; color: white; background-color: #1e1e1e; " v-on:click="greet">Delete</button>
                  
            <h5  style="font-face: 'Comic Sans MS'; font-size: larger; color: white; background-color: #1e1e1e; " >Selected: {{ selected }}</h5>

            <v-data-table dark
                    v-model="selected" 
                    :headers="headers"
                    :items="exa_tb"
                    item-key="id" 
                    select-all
                    show-select
                    :items-per-page="3"
                    class="elevation-1">
            </v-data-table> 
            
            <button style="font-face: 'Comic Sans MS'; font-size: larger; color: white; background-color: #1e1e1e; " onClick="window.location.reload();">Refresh Page</button>
          
          </v-app>
      </div>
  </div>

  <p v-else-if="state == 'loading' "> Loading Messages...</p>  
        
</template>

my javasript :

<script> 
  export default {
    data () {
      return {
        singleSelect: false,
        selected: [],
        
        headers: [{
            text: 'ID',
            align: 'start',
            sortable: false,
            value: 'id',
          },
          { text: 'Message', value: 'msg' },
          { text: 'Timestamp', value: 'timesmp' }, 
        ],
        exa_tb: [],
        error: '',
        state: 'loading',
      }
    },

    
    created(){
      this.loadExa_tb();
    },


    methods: {  
    greet: function () { 
      if(confirm('Are you sure you want to delete this item?')){
        for(var i = 1; i <=this.selected.length; i++){  
          
            var delete_this = //with the value from the selected checkbox 

            fetch('http://localhost:3000/exa_tb?id=eq.' + delete_this, {
            method: 'DELETE',
          })
          .then(res => res.text()) 
          .then(res => console.log(res))
        
        }
      }
    },
        async loadExa_tb(){
          try {
            const exa_tb = await fetch('http://localhost:3000/exa_tb');
            this.exa_tb = await exa_tb.json();
            this.state = 'ready';
          } catch(err) {
              this.error = err;
              this.state = 'error';
          }
        },  
      } 
  };
</script>

what my table looks like atm

renaise21
  • 169
  • 2
  • 9

2 Answers2

0

You have just to get the value from the array:

var delete_this = selected[i].id

Also array indexes start from 0 and your for loop starts from 1. so you have to change your for loop too

Sodala
  • 300
  • 1
  • 7
0

As you can see, the model of your data-table is "selected". As it is a reactive property, at all times it will have an array stored for each of the selected lines, which you can use for example in your greet method:

 methods: {  
    greet: function () { 
      if(confirm('Are you sure you want to delete this item?')){
        for(var i = 0; i <this.selected.length; i++){
            console.log(this.selected[i].id) // Inspect ids of selected items
            var delete_this = this.selected[i].id    
            fetch('http://localhost:3000/exa_tb?id=eq.' + delete_this, {
            method: 'DELETE',
          })
          .then(res => res.text()) 
          .then(res => console.log(res))
        
        }
      }
    },
jssDev
  • 923
  • 5
  • 18