How to pass a variable in a href tag?

Question

I have an application in vue in which I show different links in the header. depending on the environment the root of the link varies, so I have saved an environment variable with the value of this root of the link. I import it in the component to use the reference to this variable, but I can't find the way to include it in the href tag. in my component's script I import the config file where the variable is declared and return

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

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

the value brought by the environment variable at this time is https://www.test.sp, and in my template I try to use it but I don't find how to do it neither in case of being the only value nor combining it with a url termination

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

how can i use this variable inside the href tag?

Fawad · Accepted Answer · 2020-09-10T10:24:20.887

3

You need to bind the href value using the v-bind:href or shortly :href for v-bind

So simply you can bind any variable that has some link to your href like

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

edited Sep 10 '20 at 10:24

answered Sep 10 '20 at 10:14

Fawad

138
7

score 1 · Answer 2 · edited Oct 18 '20 at 09:46

You need to use v-bind: or its alias :. For example,

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

or

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

See How to pass a value from Vue data to href?

How to pass a variable in a href tag?

2 Answers2