Vuejs + Materializecss选择字段

Question

我在我的模板中有这个代码:

<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>

根据Materialisecss文档,我调用$('select').material_select();将默认选择字段转换为可爱的东西.什么也不会-它取代<select>,并<option>用标记<ul>和<li>.因此,我无法在ViewModel js文件中访问item.size的值.我甚至试图听一下选项字段的点击并调用optionClicked方法(这应该只是提醒一条消息),试图收听selectChaned.没有.

如何在ViewModel中获取选项值？

ps仅供参考:我只对选择字段有疑问.输入字段例如工作正常:

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

在ViewModel中,我可以访问 item.name

Answer 1

似乎Materialise不会发送任何事件,所以我找不到一个优雅的解决方案.但似乎以下V​​uejs指令+ 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-bind绑定<select>.

Answer 2

Vue.js 2.0

模板:

<div v-text="selected"></div>
<material-select v-bind="selected = selected || options[0].value" v-model="selected">
     <option v-for="option in options" :value="option.value" v-text="option.name"></option>
</material-select>

零件:

"use strict";

Vue.component("material-select", {
    template: '<select><slot></slot></select>',
    props: ['value'],
    watch: {
        value: function (value) {

            this.relaod(value);
        }
    },
    methods:{
      relaod : function (value) {

          var select = $(this.$el);

          select.val(value || this.value);
          select.material_select('destroy');
          select.material_select();
      }
    },
    mounted: function () {

        var vm = this;
        var select = $(this.$el);

        select
            .val(this.value)
            .on('change', function () {

                vm.$emit('input', this.value);
            });

        select.material_select();
    },
    updated: function () {

        this.relaod();
    },
    destroyed: function () {

        $(this.$el).material_select('destroy');
    }
});