Vue.js 1.0方法没有触发更改选择

Question

在Vue.js 1.0 示例之后,我使用v-model项目进行了选择下拉列表,如下所示:

{{ project }}
<select class="projects" v-model="project" @change="changeProject">
    <option value="1">School</option>
    <option value="2">Personal</option>
    <option value="3">Work</option>
</select>

js位:

new Vue({
    el: '#main',
    data: {
        project: ''
    },
    methods: {
        changeProject: function(){
            console.log(this.project);
        }
    }
});

标签{{ project }}正确显示,但是当我在选择下拉列表中选择另一个值时,它不会触发该方法changeProject.

我在这里错过了什么？

干杯.

编辑:

在@ mustafo的回答之后,我尝试使用@click方法创建一个简单的按钮,然后打印该值.只有此选择的@change不起作用.

EDIT2:

我意识到为什么这不起作用.我正在使用jquery函数更改此选择框的选定选项,因为我需要创建一个完整的CSS样式下拉列表,然后我为它创建了一个"掩码".

Answer 1

好吧,我也遇到过这个问题.根据我的正确解决方案是添加v-model到选择标记,然后将该模型的观察添加到watch对象中:

watch: {
    myModel: function(currentValue) {

        // do my stuff
    }
}