vue与materialize框架的结合之form组件的select控件
发布于 1 年前 作者 zyw327 458 次浏览 来自 问答

测试materialize框架与vue的结合,使用了materialize的form组件里面的select空间,测试change事件,动态增加select的option选项。 模板代码如下:

<template>
  <div class="input-field col s12">
    <select v-on:change="add()">
      <option value="" disabled selected>选择</option>
      <option v-for="value in datas" :value="value.value">{{ value.label }}</option>
    </select>
    <label>Materialize 下拉列表</label>
  </div>
</template>

此处使用了jquery绑定change事件,因为vue无法绑定change事件

export default {
  name: 'Select',
  data () {
    return {
      datas: [
        {label: '选项1', value: '0'},
        {label: '选项2', value: '1'},
        {label: '选项3', value: '2'},
        {label: '选项4', value: '3'},
        {label: '选项5', value: '4'}
      ]
    }
  },
  methods: {
    add: function() {
      this.datas.push({label: '选项' + (this.datas.length + 1), value: this.datas.length});
      $('select').material_select();
    }
  },
  mounted: function() {
    $('select').material_select();
    var self = this;
    $('select').on('change', function() {
      self.datas.push({label: '选项' + (self.datas.length + 1), value: self.datas.length});
    });
  },
  updated: function() {
    $('select').material_select();
  }
}

QQ图片20171117143547.pngQQ截图20171117143627.png 怎么才能用vue绑定select的change事件

回到顶部