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

Question

我和Vue2.0一起试过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>

我试着创建了一个小提琴，然而在小提琴中，UI并没有正常地出现，至少在本地UI是正常工作的。

请告诉我我在这里做错了什么。

Answer 1

尝试使用v-model.lazy

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

文档