vue2 弹窗中分类设置的增删改

<el-dialog title="分类设置" :visible.sync="setVisible" width="30%">
      <div class="set" v-for="(item, index) in setArry" :key="index">
        <div class="title">分类{{ index + 1 }}:</div>
        <div style="width: 60%;">
          <el-input v-model="item.qcatName" />
        </div>
        <el-button size="mini" type="danger" style="margin-left: 10px;" v-if="setArry.length >= 2"
          @click="deleteItem(index)"> 删除</el-button>
      </div>
      <el-button style="    margin-left: 60px;" type="primary" icon="el-icon-plus" size="mini"
        @click="addItem">新增分类</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSet">确 定</el-button>
      </span>
    </el-dialog>



<script>
data () {
    return {
      setVisible: false,
      setArry: [{ qcatName: '' }],
    }
  },
  created () {
   
    this.getQuesCatelist()
  },
  /** 分类设置按钮操作 */
    handleSet () {
      this.setVisible = true
    },
    /** 分类设置提交按钮操作 */
    async submitSet () {
      try {
        const res = await questionCategory(this.setArry)
        // 请求成功，提示成功
        this.$message.success('操作成功')
        this.setVisible = false
      } catch (error) {
      }
    },
    /** 获取分类设置数据接口 */
    async getQuesCatelist () {
      const res = await quesCatelist()
      this.setArry = res.data.map(item => {
        return {
          qcatId: item.qcatId,
          qcatName: item.qcatName
        }
      })
    },
    /** 分类设置添加按钮操作 */
    addItem () {
      if (this.setArry.length > 0) {
        const previousItem = this.setArry[this.setArry.length - 1]
        if (!previousItem.qcatName) {
          this.$message.error('分类名称不能为空！')
          return
        }
      }
      判断数组中是否存在重复元素
      const newName = this.setArry[this.setArry.length - 1].qcatName
      if (this.setArry.slice(0, -1).some(item => item.qcatName === newName)) {
        this.$message.error('分类名称不能重复')
        // 清空当前重复的值
        this.setArry[this.setArry.length - 1].qcatName = ''
        return
      }
      this.setArry.push({ qcatName: '' })

    },
    /** 分类设置删除按钮操作 */
    deleteItem (index) {
      this.setArry.splice(index, 1)
    },
</script>