Show select by value with Vue - vue.js

Question

i have this select:
<b-form-group
label-cols-sm="2"
label-cols-lg="2"
content-cols-sm
content-cols-lg="10"
v-bind:label="$t('vue.contract_terms')"
label-for="contract_terms"
v-show="contract">
<b-form-select
:options="contract_terms"
v-model="form.contract_data.contract_terms"
id="contract_terms"
:state="validate(form.contract_data.contract_terms)">
</b-form-select>
</b-form-group>
i want to show it when in my other select i choose all values except "vat" and "international_contract"
this is my js (hiring_types are the options of my other select) setSelected is my method to show my select above but i want to show it when i choose all values except "vat" and "international_contract":
data: (instance) => {
return {
contract: true,
}
},
computed:{
hiring_types () {
return [
{value: 'contract' , text: this.$t('vue.freelance')},
{value:'vat' , text: this.$t('vue.employment')},
{value: 'apprenticeship', text: this.$t('vue.apprenticeship')},
{value:'co_co_co' , text: this.$t('vue.co_co_co')},
{value: 'international_contract' , text: this.$t('vue.international_contract')}
]
},
},
methods:{
setSelected(value) {
this.hiring_contract_category = value;
this.contract = value === 'contract';
},
}
How can i do?

Answer 1

You can use Vue's template conditionals:
<template v-if='["vat", "international_contract"].map(val => !hiring_types.map(entry => entry.value).includes(val)).every(v => v)'>
<!-- insert b-form-group -->
</template>
Better to make this conditional a computed property and use it in your template for brevity:
// in your script
{
computed: {
showFormGroup () {
return ["vat", "international_contract"]
.map(val => !hiring_types.map(entry => entry.value)includes(val))
.every(v => v)
}
}
// in your template
<template v-if='showFormGroup'> ... </template>