Tengo:
<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>¿Cómo puedo hacer que esta línea de código funcione, de modo que el enlace de origen sea dinámico? Actualmente funciona con la selección desplegable cuando se incrusta en un iframe. Supongo que probablemente tenga algo que ver con la función de cálculo, no estoy muy seguro
export default { el: '#apps', data () { return { source:'http://127.0.0.1:5503/src/html/`{{this.selectedFactory}}`_{{this.selectedToy}}.html', selectedFactory: '', selectedToy:'', } }, computed:{ } }Debería poder utilizar la directiva v-bind en su plantilla, así:
<a v-bind:href="source">{{selectedFactory + selectedToy}}</a>
En cuanto a su propiedad de datos, creo que puede usar la concatenación de cadenas normal para hacer su URL dinámica:
data () { return { source:'http://127.0.0.1:5503/src/html/' + this.selectedFactory + '_' + this.selectedToy + '.html', selectedFactory: '', selectedToy:'', } }La sintaxis de llaves dobles {{}} es para usar en su código html de su aplicación vue. ¡Espero eso ayude!
He descubierto la respuesta:
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', } } }debería usar <router-link> dentro <b-dropdown-item> , así:
<b-dropdown-item><router-link :to="some_url">China</router-link></b-dropdown-item> ... data() { return { some_url: '', }; },o:
computed: { some_url() { return 'foo' } }