Vuejs + Materializecss select 字段

Vuejs + Materializecss select field

我的模板中有这段代码：

<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 字段转换为可爱的东西。它还可以做什么 - 它用 <ul> 和 <li> 替换 <select> 和 <option> 标签。 结果，我无法在我的 ViewModel js 文件中访问 item.size 的值。我什至尝试监听选项字段上的点击并调用 optionClicked 方法（然后应该只是提醒一条消息），尝试监听 selectChaned。没有。

如何在 ViewModel 中获取选项值？

p.s。仅供参考：我只有 select 字段有问题。例如，输入字段工作正常：

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

在 ViewModel 中我可以访问 item.name

我遇到了类似的问题。这里的问题是，只有在 Vue 应用程序的 DOM 准备就绪后，您才需要发出 $('select').material_select();。所以你可以在你的 Vue 应用程序中添加一个 ready 方法，并在你的 ready 方法中包含 $('select').material_select(); 。 

var vm = new Vue({
data: function() {
   locations: ["Clayton", "Mt Meigs", "Birmingham", "Helena", "Albertville", "Albertville", "Grant"]
},
ready: function() {
    $('select').material_select();
}});

只需确保在 html 文件中首先包含 Jquery，然后是 materialize.js，然后是 Vue.js。

Materialize 似乎没有派发任何事件，所以我找不到优雅的解决方案。但似乎以下 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 绑定