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

Question

My vue component, you can see this below

<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>

On the gulp exist error

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.

How can I solve it?

tony19 · Accepted Answer · 2022-07-15 04:23:53Z

6

You can solve it easily by putting this

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

Instead of this

<option selected disabled>Status</option>

https://v2.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.

edited Jul 15, 2022 at 4:23

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 5, 2017 at 8:02

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related