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>