CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuex
samuel toh
samuel toh

Reputation: 7076

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

My component vue is like this :

<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>

I want to add condition in select

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

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

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

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

How can I do it?

Upvotes: 0

Views: 5888

Answers (1)

thanksd
thanksd

Reputation: 55644

You can bind data to plain HTML attributes. It doesn't need to be a component property. 

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

Doing this, the select element will only have the required attribute if type == 2.

Upvotes: 4

Related Questions