[Vuejs]-Put together values from inputs and add "?" or "!" to create a link using Vue.js

by

0👍

✅

You can use a computed property:

computed: 
  {
    url : function()
  {
    if(this.first =='') return '';
    return "http://example.com&name=" + this.first + "&lastname=" + this.last
  }
 }

See this working fiddle: https://jsfiddle.net/udycnzq7/

0👍

If you’re using vue.js, I’m assuming your inputs are v-models.
Vue handles dynamically updating a javascript object with it’s attached input field as long as you add the v-model directive to your input tag. So you don’t need to worry about the dynamic part – that’s handled for you already.

For displaying the link, you can use a string template to build the concatenated link and place this string template where you want it. Vue will dynamically update the link with the object value. You can confirm this by opening up developer tools on the page with your inputs (with the v-model directive added to the input tags), and as you supply input in your webpage, the binded javascript object will automatically update in your developer console.

For example, if you’re trying to hit an api using an http.put request, and your model.http, model.fname, and model.lname are supplied using v.models…

this.http.put(`$(model.http)?name=$(model.fname)&lastname=$(model.lname)`);

Leave a comment