textarea: object property value cannot be changed (input works as expected)

I have a case where <b-form-textarea /> works differently from <b-form-input /> and it’s causing issues for me in my app.

I have a component that has multiple inputs that each bind to different object properties. The value in my form is coming from a vuex store, and I’m passing it to my form component as a “computed property”. When using a <b-form-textarea v-model="value.property" /> I am unable to change the value in the <textarea>. It looks like the initial value from the object keeps overwriting whatever the user tries to input. (on each “input” event, that is) If I change the input to <b-form-input />, things go back to working as expected.

Here’s a link to a JS Bin that reproduces the bug. When trying to reproduce the issue, I did discover that not using a “computed property” caused this to behave more as expected, but the difference between input and textarea in this case still has me thinking it’s an internal bug.

[mosinve]

If you look at your example closely, you’ll see, that both b-form-input and b-form-textarea don’t set value.property. Because the whole example is wrong. This is an example of how not to write components. It’s not the bug.

[dominicbarnes]

@wassansalih I’ve had to resort to using a <b-input /> instead for the time-being 😦

(the proposed solution of using a getter/setter computed property did not help me)