javascript - 在 Vue.js 中，如何在选择显示的元素时触发一个事件？

Question

这是一个 fiddle 示例:

https://jsfiddle.net/40fxcuqd/

最初，它显示“Carl”

如果我选择 Carol、Clara 等，则会触发一个事件并将数据打印到控制台。

但如果我单击下拉菜单并选择“Carl”，则不会触发任何事件，也不会向控制台打印任何内容。

我使用的事件是@input:

<select v-model="selectedPerson" @input="myEvent()">

如何在每次选择某项时触发一个事件，即使它是相同的值？

编辑:

澄清一下，最初选择“Carl”时:

然后打开下拉菜单:

然后 Carl 再次被选中，我希望触发一个事件并打印到控制台。我目前的问题是没有触发任何事件，也没有任何内容打印到控制台。

Answer 1

这是因为默认选择的选项是 1，那么当你点击 Carl 时没有任何变化，你必须使用 @change 事件，如果你想在你点击时获得 Carl 值，应该在选择选项上使用占位符。

new Vue({
    el: '#app',
    template: `
        <div>
            <select v-model="selectedPerson" @change="myEvent()">
                <option :value="null" disabled hidden>Select option</option>
                <option v-for="person in people" :value="person.key" :selected="person.key == selectedPerson">{{person.name}}</option>
            </select>
        </div>
    `,
    data: {
        people: [
            {key: 1, name: "Carl"},
            {key: 2, name: "Carol"},
            {key: 3, name: "Clara"},
            {key: 4, name: "John"},
            {key: 5, name: "Jacob"},
            {key: 6, name: "Mark"},
            {key: 7, name: "Steve"}
        ],
        selectedPerson: null
    },
    methods: {
    myEvent: function() {
    console.log(this.selectedPerson);
    }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>