为什么要求不在 vue.js 2 中工作？

Question

你可以在下面看到我的案例

我的vue组件是这样的:

<template>
    <select class="form-control" :name="elementName" v-model="selected" :required="module === 'addProduct'" >
        <option>Choose</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>
<script>
    ...
    export default {
        ...
        props: ['elementName', 'module'],
        data() {
            return {
                selected: 'Choose'
            };
        },
        ...
    };
</script>

结果是这样的:

我什么都不 select。我单击按钮提交，所需的不起作用。它不显示所需的

我这样试：

<option value="">Choose</option>

有效。但是，第一次访问时，选项选择不显示

我该如何解决这个问题？

Answer 1

查看他们的示例：https://vuejs.org/v2/guide/forms.html#Select

它没有显示任何内容，因为您有：selected: 'Choose' 但您没有 option 和 value="Choose"。（值为空字符串，"Choose"只是选项元素的内部文本）。

试试这个：

<template>
    <select class="form-control" :name="elementName" v-model="selected" :required="module === 'addProduct'" >
        <option disabled value="">Choose</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>
<script>
    ...
    export default {
        ...
        props: ['elementName', 'module'],
        data() {
            return {
                selected: ''
            };
        },
        ...
    };
</script>

为什么要求不在 vue.js 2 中工作？

Why required not working in vue.js 2?

vue.js

vue-component

vuejs2