[JavaScript知识库]vue 点击添加多个input及多个关键字

<template>
<div>
  <div class="input-info">
    <el-button type="primary" size="small" @click="addInput">添 加</el-button>
    <div v-for="(item,i) of eventPlanForm.matchKeywordArray" :key="i" >
      <el-input type="text" v-model="keywordList[i]" placeholder="可添加多个关键词，回车键确认" size="small" clearable
        @keyup.13.native="enterFun(1,i)" style="width:480px;margin-right:10px"></el-input>
      <span class="iconfont el-icon-remove text-red" style="cursor:pointer" @click="removeInput">移除</span>
      <div class="textarea-info">
        <el-tag :key="tag" v-for="tag in eventPlanForm.matchKeywordArray[i]" closable :disable-transitions="true"
          size="small" @close="keywordClose(tag,1,i)">
          {{tag}}
        </el-tag>
      </div>
    </div>
    <div>
      <el-input v-model="ambiguityKeywordArray" placeholder="可添加多个关键词，回车键确认" style="margin-top:15px" size="small" @keyup.13.native="enterFun(2)"></el-input>
        <div class="textarea-info">
          <el-tag :key="tag" v-for="tag in eventPlanForm.ambiguityKeywordArray" closable :disable-transitions="true"
            size="small" @close="keywordClose(tag,2)">
            {{tag}}
          </el-tag>
        </div>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        keywordList:[],
        ambiguityKeywordArray:'',
        eventPlanForm: {
          matchKeywordArray:[],
          ambiguityKeywordArray:[],
        },
      };
    },
methods:{
      // 添加input
      addInput() {
        this.keywordList.push('')
        this.eventPlanForm.matchKeywordArray.push([])
      },
      // 移除input
      removeInput() {
         this.keywordList.pop('')
        this.eventPlanForm.matchKeywordArray.pop([])
      },
      //关键字添加
      enterFun(num,i) {
        if (num == 1) {
          if (this.keywordList[i].replace(/(^\s*)|(\s*$)/g, "") == '') {
            this.keywordList[i] = '';
            return;
          }
          if (this.eventPlanForm.matchKeywordArray[i].indexOf(this.keywordList[i]) == -1) {
            this.eventPlanForm.matchKeywordArray[i].push(this.keywordList[i])
            this.keywordList[i] = ''
            console.log(this.eventPlanForm.matchKeywordArray)
          } else {
            this.$message.warning('该关键字已经添加')
            this.keywordList[i] = ''
          }
        }
        if (num == 2) {
          if (this.ambiguityKeywordArray.replace(/(^\s*)|(\s*$)/g, "") == '') {
            this.ambiguityKeywordArray = '';
            return;
          }
          if (this.eventPlanForm.ambiguityKeywordArray.indexOf(this.ambiguityKeywordArray) == -1) {
            this.eventPlanForm.ambiguityKeywordArray.push(this.ambiguityKeywordArray.replace("\n",''))
            this.ambiguityKeywordArray = ''
            console.log(this.eventPlanForm.ambiguityKeywordArray)
          } else {
            this.$message.warning('该关键字已经添加')
            this.ambiguityKeywordArray = ''
          }
        }
      },
      //关键字删除
      keywordClose(tag, num,i) {
        if (num == 1) {
          this.eventPlanForm.matchKeywordArray[i].splice(this.eventPlanForm.matchKeywordArray[i].indexOf(tag), 1);
          console.log(this.eventPlanForm.matchKeywordArray)
        }
        if (num == 2) {
          this.eventPlanForm.ambiguityKeywordArray.splice(this.eventPlanForm.ambiguityKeywordArray.indexOf(tag), 1);
          console.log(this.eventPlanForm.ambiguityKeywordArray)
        }
      },
	}
  };
</script>

<style scoped>
.input-info{
  width: 600px;
  margin: 50px auto;
  background: #fff;
  padding:30px;
  line-height: 40px;
}
.el-tag{margin-right:5px;}
</style>