如何在select vue.js 2中添加要求与否的条件？

Question

我的组件vue是这样的：

<template>
    <select class="form-control" v-model="selected" required @change="changeLocation">
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>\
    </select>
</template>
<script>
    export default{
        props: ['type'],
        ....
    };
</script>

我想在select

中添加条件

如果type = 1，则在选择不显示时需要这样：

<select class="form-control" v-model="selected" @change="changeLocation">

如果type = 2，则需要选择显示，如下所示：

<select class="form-control" v-model="selected" required @change="changeLocation">

我该怎么做？

Answer 1

您可以将数据绑定到纯HTML属性。它不需要是组件属性。

<select class="form-control" :required="type == 2" ...></select>

执行此操作时，如果required，则select元素将只有type == 2属性。