在 VUE 中向 href 添加数据

Posted 2023-02-23

【中文标题】在 VUE 中向 href 添加数据

【英文标题】：Adding data to href in VUE

【发布时间】：2019-04-08 18:25:31

【问题描述】：

在 Vue.js 中向 HREF 添加数据时遇到一些问题。我目前有以下代码来呈现相应的图标。

           <v-card-text>
            <v-btn
              v-for="icon in icons"
              :key="icon"
              class="mx-3 white--text"
              icon
            >
              <v-icon  size="24px"> icon.icon 
              </v-icon>
                <a :href="`#$icon.link`" ></a>
            </v-btn>
          </v-card-text>

数据如下：

     icons: [
      icon:'fab fa-facebook', link:'https://www.facebook.com/user',
      icon:'fab fa-twitter', link:'https://twitter.com/user',
      icon:'fab fa-linkedin', link:'https://www.linkedin.com/in/user/',
      icon:'fab fa-instagram', link:'https://www.instagram.com/user/',
    ],

图标本身可以正常渲染，但我一辈子都无法让链接正常工作。

如何使用 icon.link 将 href 链接到图标

【问题讨论】：

也许这个Question 会帮助你。尝试使用v-bind:。例如<a v-bind:href="'/icon/'+ i.id">

:href="icon.link" ...这将绑定href，但您的链接没有内容

【参考方案1】：

要绑定数据，您只需在 href 中进行 v-bind，并在 href 中正确定位所需的位置，继续我将提供的示例。

<div id="app">
<a :href="icons[1].link" >test</a>
</div>

new Vue(
el: '#app',
data: () => (
icons: [
      icon:'fab fa-facebook', link:'https://www.facebook.com/user',
      icon:'fab fa-twitter', link:'https://twitter.com/user',
      icon:'fab fa-linkedin', link:'https://www.linkedin.com/in/user/',
      icon:'fab fa-instagram', link:'https://www.instagram.com/user/',
    ]
)
)

示例： https://jsfiddle.net/hamiltongabriel/ke8w9czy/16/

【参考方案2】：

<a>-标签内没有任何内容。这应该有效：

<v-card-text>
  <v-btn
    v-for="icon in icons"
    :key="icon"
    class="mx-3 white--text"
    icon
  >
    <a :href="`#$icon.link`">
      <v-icon size="24px"> icon.icon </v-icon>
    </a>
  </v-btn>
</v-card-text>

【参考方案3】：

您可以将 href 属性直接分配给 vuetify 按钮。

<v-btn
    v-for="icon in icons"
    :key="icon"
    class="mx-3 white--text"
    icon
    :href="icon.link"
    >
    <v-icon  size="24px"> icon.icon 
    </v-icon>
</v-btn>

Vuetify Button Doc