How to set border on specific row of Vuetify table?

Question

I am trying to set the border-left property to specific rows of the v-data-table instead of the whole table like seen in this Codepen. How do I access that?

Answer 1

Use the item slot template...

    <template #item="{ item }">
       <tr :style="showBorder(item)">      
          <td v-for="(col,key) in item" :key="key">
              {{ col }}
          </td>
       </tr>
    </template>

And a method to determine when to show the border...

  methods: {
      showBorder(item) {
          if (item.name === "Eclair") {
            return {borderLeft:'thick solid hsl(0, 100%, 50%)'}
          }
      },
  },

Codeply