Wie übergebe ich eine Variable in einem href-Tag?

Question

Ich habe eine Anwendung in vue, in der ich verschiedene Links in der Kopfzeile zeige. Abhängig von der Umgebung variiert das Stammverzeichnis des Links. Daher habe ich eine Umgebungsvariable mit dem Wert dieses Stammverzeichnisses des Links gespeichert. Ich importiere es in die Komponente, um den Verweis auf diese Variable zu verwenden, finde aber keine Möglichkeit, ihn in das href-Tag aufzunehmen. Im Skript meiner Komponente importiere ich die Konfigurationsdatei, in der die Variable deklariert ist, und gebe sie zurück

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

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

Der Wert, den die Umgebungsvariable zu diesem Zeitpunkt bringt, ist https://www.test.spund in meiner Vorlage versuche ich es zu verwenden, aber ich finde nicht, wie ich es tun soll, weder wenn es der einzige Wert ist, noch wenn ich es mit einer URL-Terminierung kombiniere

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

Wie kann ich diese Variable im href-Tag verwenden?

Answer 1

Sie müssen den href- Wert mit v-bind:hrefoder kurz :hreffür v-bind binden

Sie können also einfach jede Variable binden, die einen Link zu Ihrer href hat

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

Answer 2

Sie müssen v-bind: oder seinen Alias: verwenden. Zum Beispiel,

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

oder

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

Siehe So übergeben Sie einen Wert aus Vue-Daten an href?