0

I need to create a dynamic link which makes use of a bound variable. The "dynamism" of the link is done though a modification of the href field with a bound variable ip:

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

This does not work because {{ip}} is not interpolated and I get a warning

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

Switching href= into :href= breaks the template:

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

How can I use bound values in href?

EDIT: I cannot use a computed value (which would have been the first idea) because I am in a Buefy table and uses the data current to the row i am in (see https://codepen.io/WoJWoJ/pen/vrOgOX?editors=1010 for an example, the props.row elements properties are my ip)

WoJ
  • 27,165
  • 48
  • 180
  • 345
  • 1
    You could use a computed? – Emile Bergeron May 31 '18 at 15:00
  • 1
    IIRC, `{{ip}}` would work. – ceejayoz May 31 '18 at 15:03
  • @ceejayoz: yes it does, thank you. It is perfect because I cannot use a computed value (at least I think so) because I am in a Bueify table (https://codepen.io/WoJWoJ/pen/vrOgOX?editors=1010). Would you mind turning your comment into an answer so that I can accept it? – WoJ May 31 '18 at 15:07
  • @thanksd: oh yes, an exact duplicate - I mark it as such. Thanks. (EDIT: ... but it is not immediately marked as a dupe even though me as the author says so ...) – WoJ May 31 '18 at 15:11

2 Answers2

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>
Lucas Jahn
  • 306
  • 1
  • 3
  • 14
  • Since you are using an arrow function like that, `getIpUrl` is going to return `http://example.com/undefined`, because you're referencing the wrong `this`. – thanksd May 31 '18 at 15:08
  • you are right, you have to do it with a normal function. Corrected it in the answer. – Lucas Jahn May 31 '18 at 15:09
  • If that's a _property_ it should be named `ipUrl`. `getIpUrl` is a name for a _method_, and looks quite unreadable in the template, where you use it without call syntax. – Frax May 31 '18 at 15:42
  • your are right @Frax Let me quickly update my snippet for others. I had a method in place before here. – Lucas Jahn May 31 '18 at 15:44
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).

Frax
  • 5,015
  • 2
  • 17
  • 19
  • I personally would prefer a computed property instead of a expression in the html attributes so leave the "logic" to the script and the display to the html. – Lucas Jahn May 31 '18 at 15:10
  • 1
    That's the matter of taste of course, but I'd say that calling simple concatenation a "logic" is quite a stretch. Even more so if you write it with new string literal notation. Unless the url is needed in multiple places (and so computed property de-duplicates the code), I'd say writing expression inline is better for sheer brevity and simplicity. – Frax May 31 '18 at 15:46
  • Depends completely on the context in my eyes. But I agree, its a matter of taste. Thats why I said, I prefer it as computed. I like to take away all interpolations or expressions from the html and leave it up to the js part, but just my own way of working it out :) – Lucas Jahn May 31 '18 at 15:49