Vue中如何根据Select选项显示/隐藏输入组件（编辑场景）

在Vue里完全不需要用onchange事件，用响应式的方式更简洁——直接通过v-model绑定的变量配合v-if就能实现需求，这也是Vue推荐的做法。

核心修正点 #

• 修正v-if判断条件：你之前的v-if="accessTypes.id == 2"错误，accessTypes是数组，无法直接取id，应该用v-model绑定的data.accessType判断，正确条件为v-if="data.accessType === 2"
• 移除冲突属性：第一个v-select里的v-bind:value="accessTypes.id"是多余的，会和v-model的双向绑定冲突，必须删掉
• 初始化默认值：给data.accessType设置默认值（比如1），避免页面加载时因undefined导致判断异常

修正后的完整代码 #

<v-tab-item value="access">
  <v-form ref="form">
    <v-row style="margin-top: 20px;">
      <v-col cols="12">                
        <v-select 
          v-model="data.accessType"
          :items="accessTypes"
          item-text="name"
          item-value="id"
          menu-props="bottom, offsetY"
          :label="$t('wkt.admin.activity-types.edit-activity-types.access-type_placeholder')"    
        />
      </v-col>

      <!-- 修正后的显示判断 -->
      <v-col cols="12" v-if="data.accessType === 2">
        <v-select 
          chips
          multiple
          v-model="data.workplaces"
          <!-- 注意：此处items应替换为实际的工作场所数组数据源，当前data.name可能有误 -->
          :items="workplacesList"
          item-text="name"
          item-value="id"
          menu-props="bottom, offsetY"
          :label="$t('wkt.admin.activity-types.edit-activity-types.workplaces')"
        />
      </v-col>

      <v-col cols="12">
        <v-select
          chips
          multiple
          v-model="data.departments"
          :items="data.departments"
          item-text="name"
          item-value="id"
          menu-props="bottom, offsetY"
          :label="$t('wkt.admin.activity-types.edit-activity-types.departments')"
        />
      </v-col>

      <v-col cols="12">
        <v-select
          chips
          multiple
          v-model="data.projects"
          :items="data.projects"
          item-text="name"
          item-value="id"
          menu-props="bottom, offsetY"
          :label="$t('wkt.admin.activity-types.edit-activity-types.projects')"
        />
      </v-col>

      <v-col cols="12">                
        <v-text-field
          v-model="data.employees"
          :label="$t('wkt.admin.activity-types.edit-activity-types.access-type_employees')"
          autocomplete="none"
          :rules="[validationRules.required]"
          max="400"
        />
      </v-col>
    </v-row>
  </v-form>
</v-tab-item>

<script>
export default {
  data() {
    return {
      showDialog: false,
      loading: true,
      tab: 0,
      // 初始化时给accessType设置默认值
      data: {
        accessType: 1
      },
      accessTypes: [
        {id:1, name:'Toda la empresa'},
        {id:2, name:'Un grupo concreto'},
        {id:3, name:'Equipos o proyectos'},
        {id:4, name:'Trabajadores concretos'},
        {id:5, name:'Script'}
      ],
      // 示例：定义工作场所数据源（根据实际业务调整）
      workplacesList: []
    }
  },
}
</script>

额外提醒：第二个v-select的:items="data.name"明显不符合逻辑，需要替换为实际的工作场所数组（比如示例中的workplacesList），否则下拉选项会显示异常。

内容的提问来源于stack exchange，提问作者cuencadelrio