Vue.js Vuetify-将URL传递到表操作按钮

我有一个简单的Vuetify表，如图所示

我修改了表脚本，使其包含一个按钮，而不是复选框，如下面的模板部分所示。最初，该复选框从：项.glumnfree中获取“True”或“False”值，我现在对该项进行了重新调整，以保存一个URL，如脚本段中所示

但是，这并不能正确分配链接，按钮也不起作用。我收到一份： “无法访问您的文件”错误

使用当前代码将URL传递到按钮的正确方法是什么

模板：

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

测试按钮

脚本：

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

导出默认值{
数据（）{
返回{
甜点：[
{
名称：“棒棒糖”，
卡路里：392，
脂肪：0.2，
碳水化合物：98，
蛋白质：0，
铁：“2%”，
Glumnfree:“www.example.com”，
},
{
名称：“KitKat”，
卡路里：518，
脂肪：26.0，
碳水化合物：65，
蛋白质：7，
铁：6%，
Glumnfree:“www.example2.com”，
},
],
标题：[
{
文字：“甜点（100克），
对齐：“开始”，
可排序：false，
值：“名称”，
},
{文本：'卡路里'，值：'卡路里'}，
{text:'Fat（g'），value:'Fat'}，
{text:'Carbs（g）'，value:'Carbs'}，
{text:'Protein（g'），value:'Protein'}，
{文本：'Iron（%）'，值：'Iron'}，
{文本：'无麸质'，值：'无麸质'}，
],
}
},
}

使用：href而不是HREFALSOT.：href=“item.glumnfree”确实会通过URL，但不会将其作为链接执行。它只是路由到C:/Desktop/filename/www.example.comLinkadd http或https，然后尝试添加http！使用：href而不是HREFALSOT.：href=“item.glumnfree”确实会通过URL，但不会将其作为链接执行。它只是路由到C:/Desktop/filename/www.example.comLinkadd http或https，然后尝试添加http！