vue.js - Vuejs + Materializecss 选择字段

标签 vue.js materialize

我的模板中有这段代码:

<div class="input-field col s6">
    <select v-on:change="selectChaned" v-model="item.size">
        <option value="" disabled selected>Choose your option</option>
        <option v-on:click="optionClicked" v-for="size in case_sizes" v-bind:value="{{ size }}">{{ size }}</option>
    </select> 
    <label for="size">Size</label>
</div>

根据 Materializecss 文档，我调用 $('select').material_select();将默认选择字段转换为可爱的东西。它还有什么作用 - 它取代了 <select>和 <option>带有 <ul> 的标签和 <li> . 因此，我无法在我的 ViewModel js 文件中访问 item.size 的值。我什至尝试监听选项字段的点击并调用 optionClicked 方法(然后应该只是提醒一条消息)，尝试监听 selectChaned。什么都没有。

如何在 ViewModel 中获取选项值？

附注仅供引用:我只有选择字段有问题。例如输入字段工作正常:

<input placeholder="" name="name" type="text" class="validate" v-model="item.name">

在 ViewModel 中，我能够访问 item.name

最佳答案

似乎 Materialise 没有派发任何事件，所以我找不到一个优雅的解决方案。但似乎以下 Vuejs 指令 + jQuery 解决方法确实有效:

Vue.directive("select", {
    "twoWay": true,

    "bind": function () {
        $(this.el).material_select();

        var self = this;

        $(this.el).on('change', function() {
            self.set($(self.el).val());
        });
    },

    update: function (newValue, oldValue) {
        $(this.el).val(newValue);
    },

    "unbind": function () {
        $(this.el).material_select('destroy');
    }
});

然后在您的 HTML 中——使用 v-select 而不是 v-model 绑定(bind)