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

【问题标题】：How can I get selected value in dropdown on vue component?如何在 vue 组件的下拉列表中获取选定的值？
【发布时间】：2017-08-30 16:55:12
【问题描述】：

我的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 时将被忽略。声明初始值组件的数据选项。

我该如何解决？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

放这个就可以轻松解决

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

不是这个

<option selected disabled>Status</option>

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

v-model 将忽略初始值、选中或选中的属性在任何表单元素上都可以找到。它将始终处理 Vue 实例数据作为真理的来源。您应该在 JavaScript 端，在组件的 data 选项中。

【讨论】：