javascript - 在 VUE 中向 href 添加数据

Question

在 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 链接到图标

标签： javascriptvue.jsvue-componentvue-routernuxt.js

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