How to make dynamic link in Vue JS?-CodePudding

I have:

<b-dropdown text="Select Factory" block variant="primary"  menu->
<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"  menu->
<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:{

  }
    
   
}

CodePudding user response：

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!

CodePudding user response：

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

CodePudding user response：

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

      }
        
       
    }