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处理'change'事件 - 它可以工作。

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

真的，不明白这里的问题是什么。如果在普通的html组件上执行该vue代码 - 它也有效。

Answer 1

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

以下是More detailed info和vue

文档中的一些示例

{{1}}

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

1 个答案: