Vue.js: insert value into textfield but don't bind it

Question

I am facing an interesting problem: I have a form where I want to insert old values (if the form was submitted before) like this:

<input type="text" :value="oldName" id="name" />

Now the problem is that I can't overwrite the oldName variable like this, so yes, I have the old value in there, but I can't change it anymore. Can you think of a solution? I basically want the value to be in the textfield, but I want the user to be able to change it. Thank you!

Lassi Uosukainen · Accepted Answer · 2017-07-26 12:22:35Z

5

Sounds like adding v-once to the input field would solve your problem. V-once means that oldName will be used to render the value once, but after that it will be a normal string literal.

<input type="text" :value="oldName" id="name" v-once/>

In case you want the user to be able to modify the value use v-model instead of v-bind. V-model provides two way binding so when the user writes something in the input field it is reflected in the value.

<input type="text" v-model="oldName" id="name" v-once/>

edited Jul 26, 2017 at 12:22

answered Jul 26, 2017 at 10:56

Lassi Uosukainen

1,68815 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hillcow Over a year ago

cool idea and works for what I described initially. Thank you! However, this inputfield of mine has other values that have to be re-rendered. So what I am looking for would be to use v-once only for one attribute only, but that doesn't work.

Lassi Uosukainen Over a year ago

@Hillcow modified the answer in case I misunderstood at first

Hillcow Over a year ago

oh, my question was so much more basic than I thought haha. Thank you!

Collectives™ on Stack Overflow

Vue.js: insert value into textfield but don't bind it

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related