vuejs - how to bind a computed attribute from String interpolation

Question

I have a set of computed data that each one of them returns a url -

computed:{
facebookUrl(){return "facebook.com"},
twitterUrl(){return "twitter.com"}
}

in the template I have a v-for loop and in each one of the items I have a 'name' (name:"facebook",name:"twitter")

now I wand to bind the computed url for each of them like this (I tried several ways, all end the same) -

:href="`${item.name}Url`"

but instead of getting the computed value I get only the strings...

and yes, I know I can use a method with param to return the value...

the value in :href will be something like 'facebookUrl', as a string. You can't create a dynamic function like this. Create a function (not computed value) that get's name as param, and returns the correct url. (use a if else, or switch case). — Steve Maris
– Steve Maris, Commented Nov 26, 2018 at 11:07

Roy J · Accepted Answer · 2018-11-26 14:15:16Z

1

You can make one computed that returns a dictionary of urls instead of multiple computeds. Then you can lookup each item's url.

new Vue({
  el: '#app',
  data: {
    items: [{
        name: 'facebook'
      },
      {
        name: 'twitter'
      }
    ]
  },
  computed: {
    urls() {
      return {
        facebookUrl: 'facebook.com',
        twitterUrl: 'twitter.com'
      };
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div v-for="item in items">
    {{urls[`${item.name}Url`]}}
  </div>
</div>

answered Nov 26, 2018 at 14:15

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steven Spungin · Accepted Answer · 2018-11-26 14:35:48Z

0

You cannot access a computed property with a dynamic string. If you do not want to use a lookup method, you have 2 options.

Add the url to the item.

:href="item.url"

Return a map from your computed, props, data, etc.

:href="urls[item.name]}"

urls(){return {facebook:facebook.com, twitter:’twitter.com’} }

edited Nov 26, 2018 at 14:35

answered Nov 26, 2018 at 12:50

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

3 Comments

Nir Aviel Over a year ago

the json is more complex then what I wrote, the computed contains params...

Nir Aviel Over a year ago

I made it with a method for now, just wanted to be sure that there isn't a shorter way. tnx.

Steven Spungin Over a year ago

Shortest way is to have a map. That approach is the easiest to maintain and extend also.

Collectives™ on Stack Overflow

vuejs - how to bind a computed attribute from String interpolation

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related