Creating a dynamic link in Vue JS is a cinch!

Question

Creating a dynamic link in Vue JS is a cinch!

I currently have the following code snippet:

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

I am trying to figure out how to make this code dynamic so that the source link changes based on the dropdown selection. Currently, when embedded in an iframe, it doesn't respond to the dropdown selections. I suspect it might be related to the compute function, but I'm not entirely certain.

export default {

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

  }
    
   
}

javascript vue.js

Answer 1

Answer №1

To utilize the v-bind directive in your template, you can follow this example:

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

When it comes to your data property, you can simply use normal string concatenation to create a 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 specifically for your HTML code within your Vue app. Hopefully, this explanation clarifies things for you!

Answer 2

To utilize the v-bind directive in your template, you can follow this example:

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

When it comes to your data property, you can simply use normal string concatenation to create a 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 specifically for your HTML code within your Vue app. Hopefully, this explanation clarifies things for you!

Answer 3

Answer №2

It is recommended to utilize <router-link> within the context of <b-dropdown-item>, as shown below:

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

Alternatively:

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

Answer 4

It is recommended to utilize <router-link> within the context of <b-dropdown-item>, as shown below:

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

Alternatively:

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

Answer 5

Answer №3

I am pleased to announce that I have uncovered the solution:

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

      }
        
       
    }

Answer 6

I am pleased to announce that I have uncovered the solution:

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

      }
        
       
    }

Creating a dynamic link in Vue JS is a cinch!

Answer №1

Answer №2

Answer №3

Similar questions

Rewriting URLs in Angular 2

The Angular2 view is failing to display updated data from a shared service

I'm receiving a TypeError in Nodejs indicating that the hashPassword function is not recognized as a function. Can anyone offer advice on how to

Combine the selected values of two dropdowns and display the result in an input field using Angular

What You See Is What You Get - A versatile tool for editing both text and

Storing the subscription value retrieved from an API in a global variable

Experiencing difficulties with mocha and expect while using Node.js for error handling

Creating a JSON object from an array of data using TypeScript

Modify the text on a button using vanilla JavaScript

Make the div disappear upon clicking the back button in the browser

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

Error in Laravel Mix Vuejs component: Syntax problem detected in <template />

Executing a "call function from a Facebook button within a Vue component" operation in Vue

jQuery struggles to locate the active class within the Bootstrap slider

Leverage the controller's properties and methods within the directive

AngularJS continues to display an "Invalid Request" message whenever the requested resource is unavailable

Create a regular expression in Javascript that only matches strings that do not contain any periods

Executing Javascript code from a specified web address

Strategies for avoiding text selection interference with onMouseMove event

Generate nth-child selectors in a Material-UI component using props dynamically