更改事件不会使用 VueJS 2 使用具体化 CSS 选择组件激活

Question

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

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
    });       
  }