Добавление данных в href в VUE

Question

Проблемы с добавлением данных в HREF в Vue. В настоящее время у меня есть следующий код для отображения соответствующих значков.

           <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/'},
    ],

Сами значки отображаются правильно, но я не могу получить ссылки для работы.

Как бы я связал href со значком, используя {{icon.link}}

Answer 1

Вы можете назначить свойство 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>

Кнопка подтверждения документа

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

Answer 3

Чтобы связать данные, вам просто нужно выполнить v-bind в href и правильно выбрать нужное расположение внутри 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/