javascript - Adding data to href in VUE - Stack Overflow

admin管理员组

文章数量:1333705

Having a bit of an issue adding data to HREF in Vue. I currently have the following code to render the respective icons.

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

And the data as follows:

     icons: [
      {icon:'fab fa-facebook', link:''},
      {icon:'fab fa-twitter', link:''},
      {icon:'fab fa-linkedin', link:'/'},
      {icon:'fab fa-instagram', link:'/'},
    ],

The icons themselves are rendering properly, but I can't for the life of me get the links to work.

How would I link up the href to the icon using {{icon.link}}

Having a bit of an issue adding data to HREF in Vue. I currently have the following code to render the respective icons.

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

And the data as follows:

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

The icons themselves are rendering properly, but I can't for the life of me get the links to work.

How would I link up the href to the icon using {{icon.link}}

• javascript
• vue.js
• vue-ponent
• vue-router
• nuxt.js

Share Improve this question Follow asked Nov 5, 2018 at 11:36 Mtlj1991Mtlj1991 19722 gold badges55 silver badges1313 bronze badges 2

• Maybe this Question will help you. Try to use the v-bind:. For example <a v-bind:href="'/icon/'+ i.id"> – xFuture Commented Nov 5, 2018 at 11:41
• 1 :href="icon.link" ... This will bind the href but your link has no content – Dan Commented Nov 5, 2018 at 11:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

To bind the data you just have to do a v-bind in href, and correctly target the positioning you want inside the href, continue with the example that I will provide.

<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./user'},
      {icon:'fab fa-twitter', link:'https://twitter./user'},
      {icon:'fab fa-linkedin', link:'https://www.linkedin./in/user/'},
      {icon:'fab fa-instagram', link:'https://www.instagram./user/'},
    ]
})
})

Example: https://jsfiddle/hamiltongabriel/ke8w9czy/16/

You don't have any content inside of the <a>-tag. This should work:

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

You could assign the href property directly to the vuetify button.

<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

本文标签： javascriptAdding data to href in VUEStack Overflow