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;
  });
});

VueJS 动态输入避免重复

VueJS dynamic inputs avoid duplicates

vue.js

vue-component

vuejs2