Select input from getmdl-select with Vue 2.0

Question

I was trying out getmdl-select with Vue2.0. in the view, I got it correct and working as expected, but it is not changing the model associated. Here is the code:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fullwidth">
  <input class="mdl-textfield__input" id="age" name="age" v-model="age" type="text" readonly tabIndex="-1" data-val="1"/>
    <label class="mdl-textfield__label" for="age">Age</label>
    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="age">
      <li class="mdl-menu__item" data-val="1">1 Month Old</li>
      <li class="mdl-menu__item" data-val="11">11 Month Old</li>
    </ul>
</div>

I have put v-model="age" with input field as given above, but age variable is not updating when selecting values from dropdown.

However vanilla select input works fine:

<select v-model="age">
  <option value="" disabled hidden>Select Age</option>
  <option value="1">1 Month Old</option>
  <option value="11">11 Month Old</option>
</select>

I tried to created a fiddle of this, however in fiddle, UI is not coming properly, in local at-least UI works properly.

Please let me know what am I doing wrong here.

I think somethint is not right with the library you are binding to the fiddle, because it does not even get updated without vue — Tienou, Nov 04 '16 at 08:42
@Belmin I don't get any error in console, in UI it selects the value, but the model remains unchanged. — Saurabh, Nov 04 '16 at 08:57

score 2 · Accepted Answer · answered Nov 04 '16 at 09:02

2

try to use v-model.lazy

<input type="text" v-model.lazy="age"/>

docs

answered Nov 04 '16 at 09:02

ABDEL-RHMAN

2,904
16
22

1

This simple thing solved my 2 hours of frustration. Thanks a lot. – Neil Agarwal Aug 06 '18 at 19:19

Select input from getmdl-select with Vue 2.0

1 Answers1