首页 文章

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

提问于
浏览 次
0

我的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 回答

  • 5

    你可以通过这个来轻松解决它

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

    而不是这个

    <option selected disabled>Status</option>

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

    v-model将忽略在任何表单元素上找到的初始值，已检查或选定的属性 . 它总是将Vue实例数据视为事实的来源 . 您应该在组件的数据选项内的JavaScript端声明初始值 .

    回复于

相关问题