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 }}正在正确显示，但是当我在select下拉列表中选择另一个值时，它不会触发方法changeProject 。

我在这里错过了什么？

干杯。

编辑：

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

EDIT2：

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

Answer 1

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

watch: {
    myModel: function(currentValue) {

        // do my stuff
    }
}

Answer 2

好像你的vue.js版本不支持shorthands。 尝试使用v-on:change="..."而不是@change="..."