CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuex
moses toh
moses toh

Reputation: 13172

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

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?

Upvotes: 0

Views: 7858

Answers (1)

Belmin Bedak
Belmin Bedak

Reputation: 9201

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.

Upvotes: 6

Related Questions