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:{
}
}
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!
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',
}
}
}
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' } }