[Vuejs]-How to combine a Vuetify data table and Vuetify list?

by

3👍

✅

DEMO: https://codepen.io/anon/pen/ZRwLgX?editors=0010

You don’t need to use Vuetify List to achieve that. You can style the content inside your Vuetify data table rows as per your requirement using Typography classes. I’ve added onclick listener on the tr tag that toggles the value key of the particular row item which is bound to the star icon.

So inside the methods in your JS I’ve added the toggle function:

toggle(name) {
  let index = this.desserts.findIndex(e => e.name == name);
  if (index > -1) {
    this.desserts[index].value = !this.desserts[index].value;
  }
}

And inside your data-table template, each row item is as follows:

<tr style="cursor: pointer" @click="toggle(props.item.name)">
  <td>
    <div class="body-2">
      {{props.item.name}}
    </div>
    <div class="">
      {{props.item.iron}}
    </div>
    <div class="">
      {{props.item.calories}}
    </div>
  </td>
  <td>
    <div class="body-2" style="textAlign: center">
      {{props.item.fat}}<br/>
      <v-icon v-if="props.item.value" color="yellow darken-2">star</v-icon>
      <v-icon v-else color="grey lighten-1">star_border</v-icon>
    </div>
  </td>
</tr>

I’ve used only 2 header items and have commented the rest. You can even choose to hide the header completely by using hide-headers props in your data-table

👤Swati Anand

Leave a comment