使用 Vue 按值显示选择答案

【问题标题】：Show select by value with Vue使用 Vue 按值显示选择
【发布时间】：2022-01-11 17:49:14
【问题描述】：

我有这个选择：

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

我想在我的其他选择中显示它，我选择除“vat”和“international_contract”之外的所有值

这是我的 js（hiring_types 是我其他选择的选项） setSelected 是我在上面显示我的选择的方法，但是当我选择除“vat”和“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';       
            },
        }

我该怎么办？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

你可以使用Vue的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>

为了简洁起见，最好将此条件设为 computed property 并在模板中使用它：

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

【讨论】：