Vue.js 1.0方法未在更改选择时启动

Vue.js 1.0 method not firing on change select

本文关键字：选择 启动 js 方法 Vue      更新时间：2023-09-26

下面是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无效。

第2版：

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

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

watch: {
    myModel: function(currentValue) {
        // do my stuff
    }
}

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

相关文章：