Vue.js 1.0 方法未在更改时触发 select

Question

在 Vue.js 1.0 examples 之后，我用 v-model 项目制作了一个 select 下拉列表，如下所示：

{{ 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 select 下拉列表中的另一个值时，它不会触发方法 changeProject.

我在这里错过了什么？

干杯。

编辑：

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

编辑2：

我明白了为什么这不起作用。我正在使用 jquery 函数更改此 select 框的 selected 选项，因为我需要创建一个完整的 css 样式的下拉列表，然后我创建了一个 "mask"为了它。

Answer 1

您的 vue.js 版本似乎不支持简写。尝试 v-on:change="..." 而不是 @change="..."

Answer 2

好吧，我也运行关注这个问题。根据我的正确解决方案是将 v-model 添加到 select 标签，然后将该模型的监视添加到 watch 对象中：

watch: {
    myModel: function(currentValue) {

        // do my stuff
    }
}

Vue.js 1.0 方法未在更改时触发 select

Vue.js 1.0 method not firing on change select

javascript

select

onchange

vue.js