如何在 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 template syntax error:

: inline selected attributes on will be ignored when using v-model. Declare initial values in the component's data option instead.

我该如何解决？

Answer 1

你可以通过把这个

轻松解决

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

而不是这个

<option selected disabled>Status</option>

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

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

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

How can I get selected value in dropdown on vue component?

vue.js

vuejs2

vue-component

vuex