想实现一个添加按钮的功能。vue

Question

现在有两个数组。一个数组A，一个数组B。
想实现这么一个功能：点击数组A里的按钮，将其添加到数组B里（这里实现了）。
如果数组B里有这个按钮，就提示 “不要重复添加”
我是用VUE写的。现在弹出提示这里卡住了。
代码：

数组A和按钮：

    data() {
      return {
        lablelist: [
          {
            name: "一二三"
          },
          {
            name: "艾泽拉斯"
          },
          {
            name: "术士"
          },
          {
            name: "牧师"
          },
          {
            name: "法师"
          },
           ],
        }

        <el-button v-for="(item,key) in lablelist" 
        type="primary" icon="el-icon-circle-plus-outline" round plain size="small"
          native-type="button" @click="lablebtnitem(item,key)">{{item.name}}
        </el-button>

数组B和按钮：

    waitLoadList: []

        <el-button v-for="(item,index) in waitLoadList" type="success" 
        icon="el-icon-circle-plus-outline" round plain
          size="small" native-type="button" 
          @click="waitlloadbtn(item,index)">{{item.name}}</el-button>

JS：

      lablebtnitem(item) {
        console.log(item)
        let array = this.waitLoadList
        if (array.length == 0) {
          this.waitLoadList.push({
            name: item.name
          })
          //   this.waitLoadList = this.waitLoadList
        } else {
          array.forEach((data, idx) => {
            console.log(data.name)
            if (data.name.indexOf(item.name) == -1) {
              this.waitLoadList.push({
                name: item.name
              })
              return true
            } else {
              // 把标签列表里的按钮 添加到待上传处
              alert("请勿重复添加标签")
              return false
              //   this.waitLoadList = this.waitLoadList
            }
          })
        }
      },

现在就是点击第一个按钮添加了一个，第二个添加了一个，第三个按钮开始就添加的不对了。开始变得很多。

Answer 1

lablebtnitem(item) {
        console.log(item)
        let array = this.waitLoadList
        if (array.length == 0) {
          this.waitLoadList.push({
            name: item.name
          })
          //   this.waitLoadList = this.waitLoadList
        } else {
          let hasVal = array.some((data, idx) => {
              return data.name === item.name;            
          });
          if (!hasVal) {
              this.waitLoadList.push({
                name: item.name
              })
              return true
            } else {
              // 把标签列表里的按钮 添加到待上传处
              alert("请勿重复添加标签")
              return false
              //   this.waitLoadList = this.waitLoadList
            }
        }
      },

Answer 2

看你代码，逻辑这块儿，感觉没啥问题。重写了一遍，处理了this指针的问题，你看看能够实现:
lablebtnitem(item) {
    const _this = this
    console.log(item)
    let array = _this.waitLoadList
    if (array.length == 0) {
      _this.waitLoadList.push({
        name: item.name
      })
      //   _this.waitLoadList = _this.waitLoadList
    } else {
      array.forEach((data, idx) => {
        console.log(data.name)
        if (data.name.indexOf(item.name) == -1) {
          _this.waitLoadList.push({
            name: item.name
          })
          return true
        } else {
          // 把标签列表里的按钮 添加到待上传处
          alert("请勿重复添加标签")
          return false
          //   _this.waitLoadList = _this.waitLoadList
        }
      })
    }
  },