Strange binding behaviour

[Rhincodon]

Vue.js version

2.1.7+

Reproduction Link

https://jsfiddle.net/rhinodontypicus/tvcz49bd/

Steps to reproduce

Change input value, click Button -> value rolls back.

What is Expected?

Input value must not be touched at all.

What is actually happening?

Input value rolls back to origin value.

If we remove v-bind:disabled from button, it works as needed — nothing happened.

[defcc]

This is an expected behavior in Vue.js 2.

When doing value changes, your app gets re-rendered, so the input value is reseted to 1. You could use v-model. I updated the fiddler here https://jsfiddle.net/tvcz49bd/1/. You also could use v-once.

[Rhincodon]

@defcc Why this behavior appeared only in Vue 2.1.7+ , not in prev releases. Is this not breaking change? Cause if you say its just how it works, why it start working like that only from release 2.1.7 specific.

[Rhincodon]

@defcc And if you say that whole template is re-render, why if we change input to textarea, its value not rolled back like input value?

[Rhincodon]

@defcc If I need submit form with ajax without bind any values to vue, I cant use vue. Is that correct?

[defcc]

@Rhincodon , I'll have a check on it.

[posva]

@Rhincodon This is a very good usecase for v-once actually 🙂 (as @defcc pointed out). It's a coincidence it worked with vue. It's true that it could be optimised
If you need to send data with ajax, just put v-once on the container element if every child (+ parent) doesn't need vue. Otherwise put it for every child. So, no, it's not correct, you can absolutely use Vue for that 😄

[defcc]

Thanks @Rhincodon , I'll open this issue.

[defcc]

In 2.1.7 static value attribute was added to dom property, which introduced the different behavior between the previous version. Related issue: #4530.

As for textarea, it's different from input element in internal implemention.

[Rhincodon]

@defcc @posva Thanks, I partially understand now. All parts of my html with not binded inputs that inside app template need to be wrapped in v-once?

[defcc]

In fact, Vue will do this automaticly, you don't need to keep it in mind. You could check this doc for more details: https://vuejs.org/v2/api/#v-once.

As for this issue, we will fix this case.