为什么需要不在 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>

结果是这样的：

我没有选择任何东西。我单击按钮提交，所需的不起作用。它不显示所需的

我尝试这样：

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

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

我该如何解决这个问题？

Answer 1

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

它不显示任何内容，因为您有：selected: 'Choose'，但您没有带有 value="Choose" 的 option。 （值为空字符串，“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>