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



  • 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.



  • What is $delete supposed to be?

    Scott



  • @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.



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

    Scott



  • @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.



  • @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.



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



  • @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.



  • @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!



  • @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.



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


Log in to reply