javascript - Vue.js 1.0 方法不会在更改选择时触发

Question

关注 Vue.js 1.0 examples ，我用 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 不起作用。

编辑 2:

我已经意识到为什么这行不通了。我正在使用 jquery 函数更改此选择框的选定选项，因为我需要创建一个完整的 css 样式的下拉列表，然后我为它创建了一个“掩码”。

Answer 1

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

watch: {
    myModel: function(currentValue) {

        // do my stuff
    }
}