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

  }
    
   
}
javascriptvue.js

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

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

      }
        
       
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS keeps an eye on properties to dynamically update data

Imagine having three different fields: The value should be modified when either the percentage or total changes. Total should update whenever the value is altered. To accomplish this, I set up some watchers for these properties: watch:{ p: function(nv ...

vue.jsvuejs2

Reset an Angular service's public variable

I recently started working with Angular and encountered an issue that I couldn't find a solution for on Google or Stack Overflow. I believe my problem lies in not knowing what to search for. Here is the code snippet causing trouble: JSFiddle HTML &l ...

javascriptangularjs

Prevent the need to keep deleting text when entering data into selectize.js <select>_dropdown

I am working with a single choice <select> element that has been enhanced using selectize.js. This <select> element already has an option pre-selected as the current value. To change this value, users must: Click on the drop-down control, Pr ...

javascriptjqueryselectize.js

Simple JavaScript timer with loop and pause

Having trouble with a countdown script and encountering multiple issues. The script does not run smoothly Difficult to make it repeat (closure) Struggling with delaying the start and repeat (closure) Seeking assistance in fixing this code which should i ...

javascriptsettimeoutsetinterval

Is it possible for my Java Applets to be compatible with Chrome 45?

Our web application utilizes three Java Applets for various functions. We are aware that Chrome 45 will no longer support NPAPI. Upon visiting Oracle's page, it is stated that Java Plugin depends on NPAPI. I have tested my Applets on Chrome 43 and 4 ...

javajavascriptgoogle-chromeapplet

Having issues with contenteditable functionality not functioning properly on elements that are dynamically generated

Creating an unordered list dynamically and adding items to it on a button click. Appending it to a section with contenteditable set to true, but encountering issues. The code snippet below demonstrates the process: // Create text input var categoryInput = ...

javascripthtmlcontenteditable

Drag and Drop Functionality in ReactJS for Organizing Multiple Lists

After hours of searching, I have yet to find a React library that can handle sorting between multiple lists. The closest solution I came across was in this article: There is also an example provided here: The issue with this solution is that you have to ...

javascripthtmlreactjsdrag-and-dropjquery-ui-draggable

trigger the eventHub within a Vuex store

I'm trying to figure out how I can utilize this.$eventHub.$emit('something'); within vuex. The reason I need this is because I'm using a plugin called vuex-persist-indexeddb, which has a method called rehydrated that fires when the data ...

vue.jsvuex

Is there a way to determine the distance in miles and feet between various sets of latitude and longitude coordinates?

I am working with an array of latitude and longitude coordinates and I am looking to use JavaScript or Typescript to calculate the distance in miles and feet between these points. const latsLngs = [ { lat: 40.78340415946297, lng: -73.971427388 ...

javascriptangulartypescript

Combining Django and chartjs to create stacked multiple charts

Hey there! I'm working on a Django application and using Chart.js to create bar charts. I encountered an issue where, after generating a new chart with a button click, the old one still lingers behind when hovering over the new chart. I have a suspici ...

javascripthtmldjango-templateschart.js

nodejs callbacks and their return values

Hey guys, I'm having trouble resolving an issue with a JavaScript callback return. Here's the function in question: //Function to get user's contact list function get_contact_list(data) { //Retrieve user ID based on ...

javascriptnode.jscallback

The definition of require is missing in the MEAN stack node

Currently experimenting with building an application on the MEAN stack and encountered a hurdle involving the use of Node's require function. Here is my current project structure: -- app -- images -- scripts -- app.js // configuration fi ...

javascriptangularjsnode.jsexpressmongoose

Is it possible to utilize AngularJS' ng-view and routing alongside jade?

Currently, I am diving into the world of the MEAN stack. I noticed that Express utilizes jade by default, but I decided to experiment with it even though I can easily use html instead. When attempting to route with Angular, like so: ... body div(ng-view ...

javascriptnode.jsangularjsexpresspug

Iterating through an array of MongoDB document IDs, querying each ID and then storing the results in a new array results in an empty array

Having trouble with the following code: const users = [] event.registeredUsers.forEach(userId => { User.findOne({ _id: userId }).then(user => { console.log(user) // displays a valid user users.push ...

javascriptnode.jsmongodbexpressnosql

Error 8007 encountered when attempting to scale at 100% proficiency. Transformation unsuccessful

Wondering if this could be a bug in Photoshop. When scaling a layer and entering values of 100%, an error message pops up: var srcDoc = app.activeDocument; var numOfLayers = srcDoc.layers.length; // main loop for (var i = numOfLayers -1; i >= 0 ; i-- ...

javascriptphotoshopphotoshop-script

What causes my scene to appear black until OrbitControl is activated in ThreeJS?

What causes the scene in ThreeJS to only appear after clicking and moving the cursor? The page remains black until I interact by clicking and moving, then everything shows up. I'm stumped on what the issue could be. Any assistance would be greatly ap ...

javascriptthree.js

Function for testing global variable stub in JavaScript

Currently, I am in the process of writing Unit tests for a React application. Within the page header, the tracking library 'mixpanel' is inserted between <script> tags as outlined in their documentation: . The documentation states that "Th ...

javascriptunit-testingtestingreactjssinon

What are the best techniques for distinguishing the selected selector in jQuery?

$('#select_id1, #select_id2, #select_id3').change(function() { // Depending on which select element has changed, 'str' should be set accordingly. // For '#select_id1', 'str' should be equal to 'select_id ...

javascriptjquery

How to trigger a component programmatically in Angular 6

Whenever I hover over an <li> tag, I want to trigger a function that will execute a detailed component. findId(id:number){ console.log(id) } While this function is executing, it should send the id to the following component: export class ...

javascriptangulartypescriptangular6

What sets apart these two JavaScript namespaces?

My main goal is to expertly organize my javascript code by eliminating any global elements. I came across two namespace declaration methods in this informative post, and now I'm looking for your input on the advantages and disadvantages of each. ...

javascript