[Vuejs]-How to use a bound variable in <a>'s href?

by

0👍

you could use it with a computed property:

new Vue({
  el: "#app",
  data: {
    ip: "10.1.1.1"
  },
  computed: {
    ipUrl: function() {
      return `http://example.com/${this.ip}`;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<div id="app">
  <a :href="ipUrl">{{ip}}</a>
</div>

0👍

You need to write a JS Expression inside :href, like

<a :href="'http://example.com/' + ip">IP</a>

Note the single quotes (devoting string) inside the double quotes (enclosing attribute value/definition).

Leave a comment