New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

b-form-input does not update reactively after first input #817

Closed
maksbotan opened this Issue Aug 12, 2017 · 10 comments

Comments

Projects
None yet
4 participants
@maksbotan

maksbotan commented Aug 12, 2017

Hi. My problem is as follows. I have this in my template:

<b-form-input type="text" v-model="someField"></b-form-input>
<b-button @click="add">Add<b-button>

And a method:

add () {
    this.someField = 'someValue'
}

this.someField is initially set to '' in data.

What happens: if i click on "Add" before inputing anything to the field, field starts to display "someValue". But if I input anything there and then click the button, field continues to display what I've entered. Vue Devtools inspector shows that this.someField is in fact updated to contain 'someValue', but $0.value in Chrome Devtools shows that actual DOM element still contains the value I've entered, not the one I've set programatically.

If I use raw <input v-model="someField"/> in my template, everything works as expected.

Is this a bug in bootstrap-vue or I'm just doing something wrong?

See demonstration in fiddle: https://jsfiddle.net/nz23f2kg/

@mosinve mosinve self-assigned this Aug 12, 2017

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 12, 2017

I just updated your fiddle, and it works for me:

https://jsfiddle.net/nz23f2kg/4/

@mosinve

This comment has been minimized.

Member

mosinve commented Aug 12, 2017

Troy, it dont work for me. Even it don't work on playground.
It works at earlier builds, i checked at my local project, which used 0.18 BV and 2.3Vue, and when i updated to current versions it brake.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 12, 2017

Weird. Let me try another browser.

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Aug 12, 2017

Yeah, the input needs to be reset to the new v-model prop passed down maybe.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 12, 2017

Yeah, i see that now. strange.

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Aug 12, 2017

You can see how it's fine on a native input: https://jsfiddle.net/jv88L704/

@alexsasharegan

This comment has been minimized.

Contributor

alexsasharegan commented Aug 12, 2017

I think it would make sense to make use of v-model internally.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 12, 2017

Can't since input (not textarea) has a dynamic type attribute (i.e. test, password, number, search, date, etc)

@mosinve mosinve closed this in #821 Aug 12, 2017

mosinve added a commit that referenced this issue Aug 12, 2017

fix (form input) input reactivity (#821)
* fix (form-input ) input reactivity
fix #817 issue
@mosinve

This comment has been minimized.

Member

mosinve commented Aug 12, 2017

fixed with #821 at dev branch.

tmorehouse added a commit that referenced this issue Aug 12, 2017

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 12, 2017

Fixed in 1.x branch as well.

pi0 added a commit that referenced this issue Aug 12, 2017

chore: merge dev into 1.x (#828)
* 1.x notes

* docs(carousel): Minor update

* docs(carousel): ensure imges are loaded with https

* fix(carousel): Ensure slideshow rotates when the end is reached (#814)

* fix(carousel): Ensure slideshow rotates when the end is reached

* Update carousel.vue

* fix(docs): Unclosed em tag in navbar example (#819)

Fix unclosed em tag in navbar example

* fix (form input) input reactivity (#821)

* fix (form-input ) input reactivity
fix #817 issue

* feat(pagination-nav): New navigation based pagination (issue #554) (#746)

* feat(pagination-nav): New navigation based cpagination

* [pagination-nav] include new component

* [pagination-nav] ESLint

* [pagination-nav] ESLint

* [pagination-nav] ESLint

* [pagination-nav] demo files

* Create demo.css

* Create demo.details

* Create demo.html

* Create pagination-nav.js

* Create README.md

* Create meta.json

* Create index.js

* Update demo.html

* [pagination-nav] remove aria-controls

* [pagination-nav] docs update

* [pagination] minor docs update

* Typo corrections

* Typo corrections

* Update pagination-nav.vue

* Add pagination-nav doc page into doc tree

* More typos corrections

* [pagination-nav] Introduce link-gen prop

Allow user to generate their own HREF string or TO object by specifying a function via `link-gen` property.

The link-gen function is passed a single argument which is the page number

* ESLint

* ESLint

* document link-gen function prop

* Typo change and wrong variable fix

* tests directory name change

* Add example of using an array to generate page links

* Create pagination-nav.js

Initial test file

* [pagination-nav] allow custom page button content

Allow user to render custom content (non-html) for page link buttons

added new prop `page-gen` which accepts a function reference.  The function will be passed the page number (indexed starting from 1), and should return a string (html not supported).  If no page-gen function is provided then default content is the page number.

* [pagination-nav] Updated docs

* fix(dropdowns): Focus dropdown item on hover (#825)

* [dropdown-js] mouseover event

* [dropdown-header] Remove tabindex

* [dropdown] mouseover event

* [nav-item-dropdown] mouseover event
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment