Vuetify - Pass URL into table action button

214 Views Asked by At

I have a simple Vuetify table as shown in their examples

I have modified the table script to include a button instead of the checkbox as can be seen in the Template segment below. Originally the checkbox was taking a 'True' or 'False' value from the: item.glutenfree - Which I have now re-jigged to hold a URL as can be seen in the Script segment.

This however doesn't assign the link correctly and the button doesn't work. I receive a: "Your file couldn’t be accessed" Error.

What is the correct way to pass a URL into the button utilizing the current code?

Template:

<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.glutenfree="{ item }">
          <v-btn 
                class="ma-2"
                color="success"
                href= item.glutenfree
                >TestButton
        </v-btn>
      </template>
    </v-data-table>
  </div>
</template>

Script:

<script>
  export default {
    data () {
      return {
        desserts: [
                    {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%',
            glutenfree: 'www.example.com',
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%',
            glutenfree: 'www.example2.com',
          },
        ],
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
          { text: 'Gluten-Free', value: 'glutenfree' },
        ],
      }
    },
  }
</script>
0

There are 0 best solutions below