vue的方法做选中后添加一个按钮

Question

求解下我这里子做了选中，然后不知道怎么动手，也没有逻辑，求解下

 <div class="team">
          <div class="team-left">
            <div class="gather">
              <p>群名称：</p>
              <el-input placeholder="请输入群名..." v-model="input10" clearable>
              </el-input>
            </div>
            <div class="gather-footer">
              <p>已选好友列表：</p>
              <div class="gather-list">
                <div>
                  <el-button plain>王五<i class="el-icon-close el-icon--right"></i></el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="team-right">
            <div v-show="assemble" @click="open" class="assemble">
              <p><img src="../../static/img/1.jpg"/></p>
              <p>我的好友</p>
            </div>
            <div v-show="assembles" class="assemble-list">
              <div class="assemble-top">
                <div class="search-item">
                  <div class="search-list">
                    <div class="search">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search_light"></use>
                      </svg>
                      <input type="text" name="" placeholder="搜索" />
                    </div>
                  </div>
                </div>
              </div>
              <p @click="chapter">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-back"></use>
                </svg>
                <span>好友列表</span>
              </p>
              <div>
                <div class="chencklist">
                  <div class="chencklist-radio" v-for="item in rows">
                    <label :for="item.id" class="chencklist-list">
                      <p>{{item.quick}}</p>
                    </label>
                    <input class="chencklist-box" type="checkbox" :id="item.id"
                           @click="selectedItem($event)" v-model="checkboxValue" :value="item.id">
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

  export default {
    name: "login",
    data () {
      return {
        input10:'',
        assemble: true,
        assembles: false,
        checkboxValue: [],
        rows:[
          {
            id:'1',
            quick:'张三',
          },
          {
            id:'2',
            quick:'李四',
          }
          
        ]

      }
    },
    methods:{
      chapter(){
        this.assemble = true;
        this.assembles = false
      },
      open(){
        this.assemble = false;
        this.assembles = true
      },
      selectedItem (event){
        const labelNode = event.target.previousElementSibling
        const classList = labelNode.classList;
        classList.contains('selected') ? classList.remove('selected') :             classList.add('selected');
        // console.log("111",labelNode)
        // console.log("111",item.id)
        // console.log("111",item.quick)

      },
      Close(){
        console.log("111",213)
      }
    }


  }

Answer 1

右边读的是所有好友
右边读所有好友中有选中标识的数据,可以通过computed来弄,应该还可以用filter
右侧点击的时候在当前数据中加上选中标识