Question

我的Vue组件如下：

<template>
    ...
        <small class="text-muted">Quality</small><br>
        <b-form-select class="mb-2 mr-sm-2 mb-sm-0"
                       :options="optQuality"
                       v-model="slcQuality" @change="changeQuality">
        </b-form-select>
    ...
</template>
<script>
    export default {
        ...
        data () {
            return {
                optQuality: [
                    { value: 1, text: 'Original' },
                    { value: 2, text: 'Kw-1' },
                    { value: 3, text: 'Kw-2' }
                ],
                slcQuality: 1
            }
        },
        methods: {
            changeQuality() {
                console.log('test')
                console.log(this.slcQuality)
            }
        }
    }
</script>

如果我选择选项Kw-1，我得到的结果是1

如果我再次选择选项Kw-2，我得到的结果是2

结果不正确

如何解决此问题？

Answer 1

在这种情况下，Label事件在之前发生，通过change更新slcQuality（在v-model事件中发生）。 input当时正在记录changeQuality的值，因此似乎slcQuality尚未更新，但实际上发生在随后的事件中。

您可以通过听slcQuality而不是input来查看更新后的值：

change

demo

在vue上的select中单击选项时如何获得价值？

1 个答案: