Experimented with getmdl-select using Vue2.0. Managed to get it to display correctly in the view, but the associated model is not updating. Here is the code snippet:
<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>
Although I have used v-model="age" on the input field as shown above, the age variable does not update when selecting values from the dropdown.
However, the vanilla select input works correctly:
<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>
Attempted to create a fiddle for this, but the UI does not display correctly. However, the UI functions properly in the local environment.
Please provide insights on what could be incorrect in my approach.