Level 47
Why is the second one an input? Does the user input anything?
Did you try using v-model on the second input?
Nov 30, 2016
11
Level 3
2 way data-binding in inputs
Is it possible to use v-model on two inputs:
<form id="form-creator">
<input v-model="calculate" type="text" name="text">
<input value="@{{ calculate }} type="text" name="text-result">
</form>
I want to make calculations, e.g. if i type 1, it will make (1*750) and output that result on the second text-result. But it seems like v-model doesn't work with outputting result in another input.
Level 3
@zachleigh, because it's a 2 way currency exchange calculator. Using the same v-model on the second value? It would duplicate it then.
Level 47
Ah, I would use computed properties probably.
1 like
Level 3
Thanks, but how to output result on the second input?
Level 47
Maybe use v-model and a computed property, not the calculate property.
Level 3
Can you throw an example?
Level 47
On mobile now. I will when I get home, if nobody does before that time.
Level 21
Here is my attempt on JSFiddle.
It requires you click ENTER after input though.
Level 47
@richard Thanks!
Dont have to hit enter: https://jsfiddle.net/6wxgz8ah/1/
1 like
Level 21
@zachleigh That's better too, but not yet. Try inserting 5 on the USD input and see
Level 3
Take a look at this: http://jsfiddle.net/bvr9754h/8/
One question: how to use select list's option value as variable in watch?
Please or to participate in this conversation.