How to make dynamic link in Vue JS?

Question

I have:

<b-dropdown text="Select Factory" block variant="primary" class="m-2" menu-class="w-100">
<b-dropdown-item @click="selectedFactory='China'">China</b-dropdown-item>
<b-dropdown-item @click="selectedFactory='Europe'">Europe</b-dropdown-item>   
</b-dropdown>
    
<b-dropdown text="Select Toy" block variant="primary" class="m-2" menu-class="w-100">
<b-dropdown-item @click="selectedToy='Marvel'">Marvel</b-dropdown-item>
<b-dropdown-item @click="selectedToy='Toy Story'">Toy Story</b-dropdown-item>   
</b-dropdown>

How can I make this line of code work, such that the source link is dynamic? Currently it does work with the dropdown selection when embeded into an iframe. I am guessing probably something to do with the compute function, am not very sure

export default {

el: '#apps',
  data () {
     return {
       
        source:'http://127.0.0.1:5503/src/html/`{{this.selectedFactory}}`_{{this.selectedToy}}.html',
        selectedFactory: '',
        selectedToy:'',
     }
  }, 
  computed:{

  }
    
   
}

Source shouldn’t be defined in data but should be a computed property instead. — Terry
– Terry, Commented Feb 12, 2022 at 18:20

Bdela · Accepted Answer · 2022-02-12 20:16:25Z

1

You should be able to make use of v-bind directive in your template, like so:

<a v-bind:href="source">{{selectedFactory + selectedToy}}</a>

As for your data property, I believe you can use normal string concatenation to make your dynamic url:

data () {
     return {
        source:'http://127.0.0.1:5503/src/html/' + this.selectedFactory + '_' + this.selectedToy + '.html',
        selectedFactory: '',
        selectedToy:'',
     }
  }

The {{}} double curly brace syntax is for use in your html code of your vue app. Hope it helps!

edited Feb 12, 2022 at 20:16

answered Feb 12, 2022 at 18:01

Bdela

1412 silver badges5 bronze badges

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

2 Comments

tony19 Over a year ago

This won't work because this.selectedFactory will not yet exist in data() (resulting in a compile error). Also, data() is not reactive, so updates to selectedFactory wouldn't be reflected in source.

Lawrence Over a year ago

@bdela I just tried your method and it cannot work. not very sure why. pardon me because i am new to vue.

hadi ahadi · Accepted Answer · 2022-02-13 03:37:24Z

0

should use <router-link> inside <b-dropdown-item>, like this:

<b-dropdown-item><router-link :to="some_url">China</router-link></b-dropdown-item>
...
data() {
  return {
    some_url: '',
  };
},

or:

computed: {    some_url() { return 'foo' } }

answered Feb 13, 2022 at 3:37

hadi ahadi

1461 gold badge1 silver badge7 bronze badges

Comments

Lawrence · Accepted Answer · 2022-02-13 03:16:42Z

0

I have figured out the answer:

   export default {
    el: '#apps',
      data () {
         return {
            selectedFactory: '',
            selectedToy:'',
         }
      }, 
      computed:{
         source: function(){ return'http://127.0.0.1:5503/src/html/'+this.selectedFactory+'_'+this.selectedToy+'.html',
}

      }
        
       
    }

answered Feb 13, 2022 at 3:16

Lawrence

1651 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to make dynamic link in Vue JS?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related