Как я могу добавить условие, которое требуется или нет в select vue.js 2?

Мой компонент 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 требуется следующее:

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

Как мне это сделать?


person samuel toh    schedule 05.05.2017    source источник
comment
vuejs.org/v2/guide/syntax.html#Attributes   -  person soju    schedule 05.05.2017


Ответы (1)


Вы можете привязать данные к обычным HTML-атрибутам. Это не должно быть свойством компонента.

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

При этом элемент select будет иметь атрибут required только в том случае, если type == 2.

person thanksd    schedule 05.05.2017