Comment passer une variable dans une balise href?

Question

J'ai une application en vue dans laquelle je montre différents liens dans l'en-tête. en fonction de l'environnement, la racine du lien varie, j'ai donc enregistré une variable d'environnement avec la valeur de cette racine du lien. Je l'importe dans le composant pour utiliser la référence à cette variable, mais je ne trouve pas le moyen de l'inclure dans la balise href. dans le script de mon composant j'importe le fichier de configuration où la variable est déclarée et retourne

<script>
import Config from './../../config.js';

export default {
  data: function () {
    return {      
      hoverHome: false,
      testUrl: Config.TEST_URL
    }
  },

la valeur apportée par la variable d'environnement à ce moment est https://www.test.sp, et dans mon template j'essaye de l'utiliser mais je ne trouve pas comment le faire ni en cas d'être la seule valeur ni en le combinant avec une terminaison d'url

  <li class="nav-item">
      <a class="nav-link head" href=testUrl>Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" href=testUrl/shops>Shops</a>
  </li>

comment puis-je utiliser cette variable dans la balise href?

Answer 1

Vous devez lier la valeur href en utilisant le v-bind:hrefou prochainement :hrefpour v-bind

Vous pouvez donc simplement lier n'importe quelle variable qui a un lien vers votre href comme

<a v-bind:href="'/anylink/' + testUrl">

Answer 2

Vous devez utiliser v-bind: ou son alias:. Par exemple,

<li class="nav-item">
      <a class="nav-link head" v-bind:href="testUrl">Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" v-bind:href="testUrl + '/shops'">Shops</a>
  </li>

ou

<li class="nav-item">
      <a class="nav-link head" :href="testUrl">Business</a>
  </li>
  <li class="nav-item">
      <a class="nav-link head" :href="testUrl + '/shops'">Shops</a>
  </li>

Voir Comment passer une valeur des données Vue à href?