VueJS动态输入避免重复：如何限制告警过滤器每种类型仅可添加一次

核心逻辑从可选选项限制、新增逻辑校验、按钮状态控制三个维度实现，确保每种过滤器类型仅可添加一次：

1. 新增计算属性，获取已使用的过滤器类型 #

首先在Vue的computed配置中新增两个计算属性，用于全局判断类型使用情况：

computed: {
  // 收集所有已经被选中的过滤器类型
  usedFilterTypes() {
    return this.alert.filters.map(item => item.type).filter(type => type && type !== '0')
  },
  // 判断是否还可以继续添加过滤器（所有可用类型都被用完时禁止新增）
  canAddFilter() {
    const availableTypes = ['price', 'sales', 'trend']
    // 经典工具额外加margin类型
    if (this.alert.tool === 'classic') availableTypes.push('margin')
    return this.usedFilterTypes.length < availableTypes.length
  }
}

2. 修改模板下拉框，隐藏已使用的类型 #

给类型选择下拉框的每个选项增加禁用判断，已经被其他过滤器选中的类型不允许再选：

<select class="form-control" v-model="filter.type">
  <option disabled selected value="0">Select</option>
  <option value="price" :disabled="usedFilterTypes.includes('price') && filter.type !== 'price'">Price</option>
  <option value="sales" :disabled="usedFilterTypes.includes('sales') && filter.type !== 'sales'">Sales</option>
  <option value="margin" v-if="alert.tool == 'classic'" :disabled="usedFilterTypes.includes('margin') && filter.type !== 'margin'">Margin</option>
  <option value="trend" :disabled="usedFilterTypes.includes('trend') && filter.type !== 'trend'">Trending items</option>
</select>

注：判断条件中加入&& filter.type !== '当前类型'是为了避免当前过滤器自己的类型被禁用，仅限制其他过滤器重复选择

3. 改造新增过滤器方法，增加前置校验 #

修改原有addFilter方法，新增前先判断是否还有可添加的类型，同时自动匹配第一个未被使用的类型作为默认值：

addFilter: function () {
  if (!this.canAddFilter) {
    // 此处可自行添加全局提示，告知用户所有类型已添加完成
    return
  }
  // 匹配第一个未被使用的类型作为新增默认值
  const availableTypes = this.alert.tool === 'classic' ? ['price', 'sales', 'margin', 'trend'] : ['price', 'sales', 'trend']
  const defaultType = availableTypes.find(type => !this.usedFilterTypes.includes(type))
  
  this.alert.filters.push({
    temp_id: (Math.floor(Math.random() * 1000)) * Date.now(),
    type: defaultType || 'trend',
    timeFrame: 'daily',
    min: null,
    max: null
  })
}

4. 控制新增按钮禁用状态 #

所有类型都被用完时，直接禁用添加按钮，避免无效点击：

<button type="submit" class="btn btn-success btn-sm" @click.prevent="addFilter" :disabled="!canAddFilter">Add Filter</button>

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