Question

我的vue组件，您可以在下面看到

<template>
    <div>
        ...
        <select class="form-control" v-model="selected" @change="myFunction()">
            <option selected disabled>Status</option>
            <option v-for="status in orderStatus" v-bind:value="status.id">{{ status.name }}</option>
        </select>
        ...
    </div>
</template>

<script>
    export default {
        data() {
            return{
                selected: ''
            }
        },
        methods: {
            myFunction: function() {
                console.log(this.selected)
            }
        }
    }
</script>

关于gulp存在错误

Vue模板语法错误：

：内联选定的属性   使用v-model时将被忽略。在中声明初始值   而是组件的数据选项。

我该如何解决？

Answer 1

你可以通过这个

轻松解决

<option disabled value="">Status</option>

而不是这个

<option selected disabled>Status</option>

https://vuejs.org/v2/guide/forms.html#Select

v-model将忽略初始值，选中或选中的属性在任何表格元素上找到。它将始终处理Vue实例数据作为真理的来源。你应该声明初始值 JavaScript端，在组件的数据选项内。

如何在vue组件的下拉列表中获取选定值？

1 个答案: