jquery - 使用 Materialize CSS Select 组件的 VueJS 2 不会激活更改事件

Question

我正在尝试制作级联组合框，但遇到了一个问题:VueJS 看不到 Materialize 选择元素的更改事件。这是我的代码:

let app = new Vue({
  el: '#app',
  data: {
    elements: [
      {'id' : 1, 'text' : 'Option 1'},
      {'id' : 2, 'text' : 'Option 2'}
    ]
  },

  updated() {
    $('select').material_select();
  },

  methods : {
    onChange() {
      alert('Option changed!');
    }  
  }
});

$('select').material_select();

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<div class="container" id="app">
  <div class="row">
    <div class="input-field col s12 m6">
      <select name='somename' id='somename' @change='onChange()'>
        <option selected="" disabled="" value="">Choose your make</option>
        <option v-for="option in elements" :value="option.id">{{option.text}}</option>
      </select>
      <label>Car make</label>
    </div>
  </div>

  <select class="browser-default" name='somename' id='somename' @change='onChange()'>
    <option selected="" disabled="" value="">Choose your make</option>
    <option v-for="option in elements" :value="option.id">{{option.text}}</option>
  </select> 
</div>

如果更改 JS 代码以使用 jQuery 处理“更改”事件 - 它可以工作。

$('#somename').on('change', function(){alert('Changed - JQUERY')});

真的，不明白这里有什么问题。如果在纯 html 组件上执行该 vue 代码 - 它也可以工作。

Answer 1

当你像这种情况一样使用 jquery 和 vue 时，DOM 的操作是由 jquery 完成的，所以你会“发出”一个事件到 vue，然后 vue 可以实现 te view 或他的值的变化。抱歉我的英语不好。

这里是 vue 文档中的一些示例和 codepen

 mounted() {
    var self = this;//vue
      $('#vueSelect').material_select();
      $('#vueSelect').on('change', function () {            
        console.log("Change from Wrapper!", this.value)
        self.$emit("change", this.value)
      });
    self.$on("change", function(data){
       console.log('Option changed!', data);
      this.selected = data
    });       
  }