标签第二期，结合vue 双向数据绑定

有些时候，数据可能是来自后端，每一个标签值都对应一组对象结构的数据，

 {
     name: "abc"
     isNew: 'true',
     isDeleted: 'false'
 }

里面记录了该标签值的具体表示信息。所以当删除标签的时候，只是在网页的显示上删除了，真实的数据不会被删除，会把标记的字段isDeleted由false,改为true,表示删除，给后端再传过去,由后端保存起来

目前需求是这样

1. 标签值不能重复，需要做校验
2. 删除的时候可以任意删除

解决这个问题，我需要一个数组，用于保存每一个标签值的name,一旦有添加重复的标签值则会进行提示

使用 vue的代码如下

          <el-form size="small" label-width="110px" style="margin-bottom:100px">
            <template v-for="(item,i) in tag_value_list">
              <el-form-item label="标签值" :key="i"   required :error="errorBags.collect('标签值')[0]">
                <el-input placeholder="请输入标签值，15字以内" style="width:200px;margin-right:20px"
                  v-model="item.name"
                  clearable
                  :maxlength="15"
                  v-validate="'required'"
                  @input="inputText($event,i,item)"
                    ></el-input>
                    <i class="el-icon-close" style="color:#409EFF;cursor:pointer" @click="confirmDelete(i)" v-show="isOne"></i>
              </el-form-item>
            </template>

            <el-form-item>
              <i class="el-icon-plus" style="color:#409EFF;cursor:pointer" @click="addLabelValue" v-show="$route.query.is_inner !=='1'">添加标签值</i>
            </el-form-item>
          </el-form>

            export default {
                data() {
                    return {
                        tag_value_list: []，
                        repeat: false,
                    }
                },
               computed: {
               // 记录得到的name数组，用于校验重复
                getCache() {
                  let validateCache = []
                  tag_value_list.forEach(item => {
                    validateCache.push(item.name)
                  })
                  return validateCache
                }
              },
                methods: {
                    // 校验规则
                inputText(text, index, item) {
                  this.getCache.splice(index, 1)
                  if (this.getCache.includes(text)) {
                    this.$message.error('标签值重复')
                    this.repeat = true
                  } else {
                    this.repeat = false
                  }
                },
                        // 删除所选的标签值
                confirmDelete(i) {
                    this.tag_value_list.splice(i, 1)
                },
                // 增加标签值
                addLabelValue() {
                // 重复值校验
                  if (this.repeat) {
                    return
                  }
                  tag_value_list.push({
                    name: ""
                    isNew: 'true',
                    isDeleted: 'false'
                  })
                  this.isOne = true
                },
                }
            }