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

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端声明初始值.