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:{

  }
    
   
}

Answer 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!

Answer 2

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',
}

      }
        
       
    }