如何在 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

中添加条件

If type = 1, on the select not display required like this :

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

如果 type = 2，在 select 上需要这样显示：

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

我该怎么做？

Answer 1

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

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

这样做，如果 type == 2.

，select 元素将只有 required 属性

如何在 select vue.js 2 中添加需要或不需要的条件？

How can I add condition that required or not in select vue.js 2?

vue.js

vuejs2

vue-component

vuex