ES6 includes

最新推荐文章于 2023-01-02 21:33:35 发布

原创最新推荐文章于 2023-01-02 21:33:35 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

js基础专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了一个使用Vue.js开发的项目，其中实现了多选和反选功能。通过点击标签，数据从后端接口获取并更新视图状态。当选择标签时，如果选择数量未超过3个，则添加到选中列表；否则提示用户标签数量已满。点击标签还会将选中的标签名称存储，以便进一步处理。

最近做了vue的一个项目，效果要实现多选及反选，数据是从后端传过来的。

代码：

<div class="lableView">
            <label
              class="lable_one"
              :class="{active:sz.includes(index)}"
              v-for="(item,index) in lableList"
              :key="index"
              @click="multiSelect(item,index)"
            >{{item.tag_name}}</label>
          </div>
        </div>

后台请求lable标签的接口：

//请求获得评论时所有标签
getAllLable(){
     let that = this;
     this.$post("?s=App.Index.Tags").then((res)=>{
       console.log(res);
       that.lableList = res.data.data;
       that.lableList.forEach(function(itemx, index){
         that.lableList[index].isActive = false
       })
     })
   },

data里的数据：

data(){
    return{
        lableList:[],
        sz:[],
        sz2:[]
    }
}

点击选择：


multiSelect(e,index){
    if(this.sz.includes(index) || this.sz2.includes(e.tag_name)){
      this.sz=this.sz.filter(function (ele){
        return ele != index;
        });
      this.sz2=this.sz2.filter(function (ele){ //要把标签内容获取下来之后传给后端
        return ele !=e.tag_name;
        });
    }else{
      if(this.sz.length < 3){  
        this.sz.push(index);
        this.sz2.push(e.tag_name);
        this.from.lableTarg=this.sz2.join(',')
      }else{
        Toast.fail('所选标签不能超过3个');
      }
    }
   },