I have several input fields which together form a long link similar to http://example.com?name=xxx&lastname=xxx...
I get the initial name and last name from the input fields.
Under the form I am displaying the concatenated link using {{model.http}}{{model.fname}}{{model.lname}}
However I have not figured out how to put in the "?" and the "&" where it should be.
So... how do I dynamically add the "?" to the http... as soon as someone starts writing something in the "first name" input?
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/
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)`);
