VueJS 动态输入避免重复

Question

我有一个项目允许用户向警报添加过滤器，避免重复过滤器并让用户为每种类型添加一个过滤器的最佳方法是什么？

<div class="filters_container" v-for="filter in alert.filters">
    <div class="form-group">
        <select class="form-control" v-model="filter.type">
            <option disabled selected value="0">Select</option>
            <option value="price">Price</option>
            <option value="sales">Sales</option>
            <option value="margin" v-if="alert.tool == 'classic'">Margin</option>
            <option value="trend">Trending items</option>
        </select>
    </div>

    <div class="form-group" v-if="filter.type == 'sales'">
        <label>Time frame</label>
        <select class="form-control" v-model="filter.timeFrame">
            <option disabled selected value="0">Select</option>
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
            <option value="total">Total</option>
        </select>
    </div>

    <div class="form-group" v-if="filter.type != 'trend'">
        <label>Values</label>
        <div class="form-row">

            <div class="col">
                <input type="text" class="form-control" v-model="filter.min" placeholder="Min">
            </div>
            <div class="col">
                <input type="text" class="form-control" v-model="filter.max" placeholder="Max">
            </div>
        </div>
    </div>
</div>

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

这是我此刻的添加过滤功能

addFilter: function () {
    this.alert.filters.push(
        {
            temp_id: (Math.floor(Math.random() * 1000)) * (Date.now()),
            type: 'trend',
            timeFrame: 'daily',
            min: null,
            max: null
        }
     )
},

Answer 1

您可以使用以下功能：

this.alert.filters = this.alert.filters.filter((value, index, self) => 
{
  return index === self.findIndex(item =>
  {
    return item.type === value.type; // && item.timeFrame === value.timeFrame && item.min === value.min && item.max === value.max;
  });
});