Question

我正在getmdl-select尝试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"与上面给出的输入字段放在一起，但是当从下拉列表中选择值时，年龄变量不会更新。

然而，vanilla 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，但是在小提琴中，UI没有正确显示，在本地至少用户界面正常工作。

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

Answer 1

尝试使用v-model.lazy

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

docs

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

1 个答案: