Using $delete to delete a customer from a table of customers in a grid

[omgwalt]

I’m having trouble figuring out how to delete a customer from a table of customers in a grid using $delete.

Here’s a pen showing what I’m trying to do: https://codepen.io/vahost/pen/VwvYGQB

The code looks like this:

<template>
  <div id="q-app" class="q-pa-md">
    <q-table
      auto-width
      grid
      title="Customers"
      :data="data"
      :columns="columns"
      row-key="first_name"
    >
      <template v-slot:item="props">
        <div class="q-pa-xs col-xs-12 grid-style-transition">
          <q-card>
            <q-card-section>
              <q-list dense>
                <q-item-section class="text-h6">
                  {{ props.row.first_name }} {{ props.row.last_name }}
                </q-item-section>
              </q-list>
            </q-card-section>
            <q-list dense>
              <q-item v-for="col in props.cols" :key="col.id">

                <q-item-section>
                  <q-item-label>{{ col.label }}</q-item-label>
                </q-item-section>

                <q-item-section
                  v-if="col.label === 'Home Phone' || col.label === 'Cell Phone'"
                  side>
                  <q-item-label>
                    {{col.value}}
                  </q-item-label>
                </q-item-section>
              </q-item>
                <div
                  style="margin-top: 15px; padding-bottom: 15px;">
                  <q-btn
                    class="q-ma-sm"
                    push
                    color="primary"
                    label="Delete"
                    @click="$delete(props,props.row.first_name)" />
                </div>
            </q-list>
          </q-card>
        </div>
      </template>
    </q-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        { name: 'home_phone', label: 'Home Phone', field: 'home_phone', align: 'left' },
        { name: 'cell_phone', label: 'Cell Phone', field: 'cell_phone', align: 'left' }
      ],
      data: [
        {
          id: '0',
          first_name: 'Joe',
          last_name: 'Smith',
          home_phone: '1234567890',
          cell_phone: '1231531532'
        },
        {
          id: '1',
          first_name: 'Patty',
          last_name: 'Jackson',
          home_phone: '0987654321',
          cell_phone: '8608608608'
        },
        {
          id: '2',
          first_name: 'Wanda',
          last_name: 'Ready',
          home_phone: '6846846848',
          cell_phone: '4564564564'
        }
      ],
      item: {},
      props: [{}]
    }
  }
}
</script>

When the user clicks the delete button, that customer should be removed from the list.

[s.molinari]

What is $delete supposed to be?

Scott

[metalsadman]

@omgwalt Vue.delete takes second parameter as {string | number} propertyName/index https://vuejs.org/v2/api/#Vue-delete. in your code should be something like @click="$delete(props.row, 'first_name')". if you want to delete the whole row, then you need pass an index ie. @click="$delete(data, someIndexAssignedByYou)".
example based on your snippet above (your codepen is broken) https://codepen.io/metalsadman/pen/YzyPJqb?editors=1010.

[s.molinari]

Ah. Ok. Now I know what $delete is. Out of curiosity, why version 0.17? Are you still using that version?

Scott

[omgwalt]

@metalsadman Okay, yes that second option you mentioned is what I’m trying to do and makes some sense to me, but where could I assign that index (someIndexAssignedByYou)? The way Qtable is structured keeps throwing me.

@s-molinari It’s an attempt to use the $delete vue method to remove the customer record containing the delete button. I just used the version in the pen because it was the only Quasar version I could find in a search there.

[metalsadman]

@omgwalt you already have an id, you can use that as row-key instead of first_name. anyway see above codepen, many ways removing a row the one i did is just a rough example.

[omgwalt]

Thanks @metalsadman
I’m still not clear where the props.key property comes from. Is that built into props?

[metalsadman]

@omgwalt said in Using $delete to delete a customer from a table of customers in a grid:

Thanks @metalsadman
I’m still not clear where the props.key property comes from. Is that built into props?

i just used it based on your snippet, you can console log props to see the properties in it, props.key is the value you passed in row-key prop in your case the first_name value. so what i did is filter the data array excluding the current row-key and re assigning the new array to data.

[omgwalt]

@metalsadman Oh, okay. I wasn’t aware of the .key special attribute. I just found it in the Vue docs. Thanks for the explanation. It helps!

[metalsadman]

@omgwalt many ways to do it tbh, another way, using id from your row object and Vue.delete https://codepen.io/metalsadman/pen/OJyPrJB?editors=1010. i haven’t done test of which is optimal but that’s up to you.

[omgwalt]

@metalsadman Thanks, I like that one too because it uses the $delete method I asked about in my original question.