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?

Answer 1

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