Select 使用 Vue 2.0 从 getmdl-select 输入
Select input from getmdl-select with Vue 2.0
我正在尝试 getmdl-select with Vue2.0。在视图中,我得到了正确的并按预期工作,但它没有改变关联的模型。这是代码:
<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>
我已将 v-model="age"
与上面给出的输入字段放在一起,但是从下拉列表中选择值时年龄变量没有更新。
但是普通 select
输入工作正常:
<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>
我试图创建一个 fiddle 这个,但是在 fiddle 中,UI 没有正常工作,至少在本地 UI 工作正常。
请告诉我我做错了什么。
尝试使用v-model.lazy
<input type="text" v-model.lazy="age"/>
我正在尝试 getmdl-select with Vue2.0。在视图中,我得到了正确的并按预期工作,但它没有改变关联的模型。这是代码:
<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>
我已将 v-model="age"
与上面给出的输入字段放在一起,但是从下拉列表中选择值时年龄变量没有更新。
但是普通 select
输入工作正常:
<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>
我试图创建一个 fiddle 这个,但是在 fiddle 中,UI 没有正常工作,至少在本地 UI 工作正常。
请告诉我我做错了什么。
尝试使用v-model.lazy
<input type="text" v-model.lazy="age"/>