Search code examples
vue.jsvuejs2vue-componentquasar-frameworkquasar

Remove specific row from Quasar's table


I read the documentation of Quasar but I didn't see any instruction to remove a specific row from a table. For example, how can I remove the selected row from its table? I want to know how can to do it in the script part, not in the HTML segment.


Solution

  • You can use splice by using index of a row to remove the row.

    methods:{
        deleteSelected(){
          let self = this;
          this.selected.filter(function(item){
            self.data.splice(self.data.indexOf(item), 1);
            return item;
          });
          this.selected = [];
        },
        deleteval(index){
          console.log(index)
          this.data.splice(index, 1);
    
          console.log(this.data)
        }
      }
    
    <template v-slot:top-right>
            <q-btn
              color="primary"
              icon-right="delete_forever"
              no-caps
              @click="deleteSelected"
            />
          </template>
           <template v-slot:body-cell-action="props">
            <q-td :props="props">
              <q-btn
              color="negative"
              icon-right="delete"
              no-caps
              flat
              dense
              @click="deleteval(data.indexOf(props.row))"
            />
            </q-td>
          </template>
    

    Working codepen - https://codepen.io/Pratik__007/pen/eYNvvva?editable=true&editors=101