vue实现循环数据动态添加标签以及单独控制显示隐藏

效果图：

 html: 

              

                

                  
333
                  

                    

                      {{ item1.label }}
                      
                    
                    
                    
                    

                      + 新增
                    
                  
                
              

js: 

handleClose(item1, index) {
      this.form.tagList[index].tags.splice(
        this.form.tagList[index].tags.indexOf(item1),
        1
      );
    },
    showInput(item, index) {
      this.$set(this.form.tagList, index, {
        ...item,
        inputVisible: true,
      });
      this.$nextTick(() => {
        let saveTagInput = `saveTagInput${index}`;
        this.$refs[saveTagInput][0].$refs.input.focus();
      });
    },
    handleInputConfirm(item, index) {
      console.log(item.inputValue, 666);
      if (item.inputValue) {
        this.form.tagList[index].tags.push({
          label: item.inputValue,
        });
        this.$set(this.form.tagList, index, {
          ...item,
          inputVisible: false,
          inputValue: "",
        });
      }
    },
    async getTag() {
      const {
        code,
        data = [],
        message,
      } = await this.$store.dispatch(
        "taskPlan/getTag",
        this.$route.query.strategyId
      );
      if (code !== 0) {
        this.$message.error(message);
        return;
      }
      this.form.tagList = data;
      for (let i = 0; i < this.form.tagList.length; i++) {
        this.form.tagList[i].inputVisible = false;
        this.form.tagList[i].inputValue = "";
      }
    },