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

我想在選擇

添加條件如果type = 1，在選擇不顯示需要這樣的：

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

如果類型= 2，在選擇顯示需要像這樣：

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

我該怎麼做？

Answer 1

您可以將數據綁定到純HTML屬性。它不需要是組件屬性。

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

這樣做，選擇元素只會有required屬性如果type == 2。