javascript - 使用 Vue 2.0 从 getmdl-select 选择输入

Question

我正在尝试getmdl-select与 Vue2.0 。在 View 中，我得到了正确的结果并且按预期工作，但它并没有改变关联的模型。这是代码:

<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 可以正常工作。

请让我知道我在这里做错了什么。

Answer 1

尝试使用v-model.lazy

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

docs