multiple chipList selection

https://www.telerik.com/kendo-vue-ui/components/buttons/chiplist/

Vue Buttons Library & ChipList Component - Getting Started | Kendo UI for Vue Docs & Demos

 

<template>
  <div class="row">
    <!-- 상품선택 -->
    <div class="flex md6">
      <div class="scrollbar">
        <div v-for="(item, index) in items" :key="item.id">
          <div class="product_box" @click="selectItem(index)">
            <!-- <img class="product_img" src="../assets/desk.png" /> -->
            <div class="border_bottom"> {{ "상품명" + item.producttitle + item.selected }} </div>
            <div><button @click="deleteItem(index)" class="delete_button">삭제</button></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 태스크선택 -->
    <div class="flex md3" id="task_selection">
      <div v-for="(task, index) in tasks" :key="task.id">
        <va-chip @click="selectTask(index)" class="task_bubble"> {{ task.tasktitle + task.selected }}</va-chip>
      </div>
    </div>
    <!-- 버전선택 -->
    <div class="flex md3" id="version_selection">
      <div v-for="(version, index) in versions" :key="version.id">
        <button @click="selectVersion(index)" class="version_bubble" v-bind:class="clicked ? 'blue' : 'white'"> {{ version.selected }}</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const number = ref(1);
    const item = ref('');
    const items = ref([
      { id: 1, producttitle: 1, selected: false },
      { id: 2, producttitle: 2, selected: false },
      { id: 3, producttitle: 3, selected: false },
      { id: 4, producttitle: 4, selected: false },
    ]);
    const task = ref('');
    const tasks = ref([
      { taskid: 1, tasktitle: '1분기', selected: false },
      { taskid: 2, tasktitle: '2분기', selected: false },
      { taskid: 3, tasktitle: '3분기', selected: false },
      { taskid: 4, tasktitle: '4분기', selected: false },
    ]);
    const version = ref('');
    const versions = ref([
      { versionid: 1, versiontitle: '버전1', selected: false },
      { versionid: 2, versiontitle: '버전2', selected: false },
      { versionid: 3, versiontitle: '버전3', selected: false },
      { versionid: 4, versiontitle: '버전4', selected: false },
    ]);
    const onSubmit = () => {
      items.value.push({
        id: Date.now(),
        producttitle: number.value += 1,
        selected: false,
        // subject: item.value
      });
    };
    const deleteItem = (index: number) => {
      items.value.splice(index, 1);
    };
    const selectItem = (index: number) => {
      // eslint-disable-next-line no-shadow
      items.value.forEach((item, itemIndex) => {
        if (index === itemIndex) {
          items.value[index].selected = !items.value[index].selected;
        // eslint-disable-next-line no-param-reassign
        } else item.selected = false;
      });
    };
    const selectTask = (index: number) => {
      // eslint-disable-next-line no-shadow
      tasks.value.forEach((task, itemIndex) => {
        if (index === itemIndex) {
          tasks.value[index].selected = !tasks.value[index].selected;
        // eslint-disable-next-line no-param-reassign
        } else task.selected = false;
      });
    };
    const selectVersion = (index: number) => {
      // eslint-disable-next-line no-shadow
      versions.value.forEach((version, itemIndex) => {
        if (index === itemIndex) {
          versions.value[index].selected = !versions.value[index].selected;
        // eslint-disable-next-line no-param-reassign
        } else version.selected = false;
      });
    };
    return {
      item,
      items,
      onSubmit,
      deleteItem,
      selectItem,
      task,
      tasks,
      selectTask,
      version,
      versions,
      selectVersion,
    };
  }
};

</script>

<style>
.white {
  width: 200px;
  height: 200px;
  background-color: white;
}

.blue {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.task_bubble {
  width: 100px;
  margin: 5px;
}

.version_bubble {
  width: 100px;
  margin: 5px;
}

#task_selection {
  background-color: rgb(163, 107, 107);
}

.scrollbar {
  display: grid;
  grid-template-columns: 9vw 9vw 9vw 9vw;
  grid-gap: 10px;
  height: 94vh;
  overflow: auto;
  font-family: 'S-CoreDream-4Regular', sans-serif;
  background-color: pink;
}

.product_box {
  display: grid;
  place-items: center;
  align-items: center; /* 수직 정렬 */
  justify-content: center; /* flex direction에 대해서 정렬방식 선택 */
  width: 9vw;
  height: 9vw;
  overflow: hidden; /* 넘어가는 사진자르기 */
  cursor: pointer;
  background-color: white;
  border-radius: 7%;
  box-shadow: 0 5px 7px -3px rgba(0, 0, 0, 0.2);
}

.border_bottom {
  display: flex;
  place-items: center;
  align-items: center; /* 수직 정렬 */
  justify-content: center; /* flex direction에 대해서 정렬방식 선택 */
  width: 130px;
  height: 20px;
  margin-top: 15px;
  margin-bottom: 5px;
  margin-left: 10px;
  border-bottom: 1px solid black;
}

.product_img {
  width: 100%;
  height: 100px;
}

.add_item {
  display: grid;
  place-items: center;
  align-items: center; /* 수직 정렬 */
  justify-content: center; /* flex direction에 대해서 정렬방식 선택 */
  width: 9vw;
  height: 9vw;
  font-size: 50px;
  color: grey;
  cursor: pointer;
  background-color: rgb(246, 246, 246);
  border-radius: 13px;
  box-shadow: 0 5px 7px -3px rgba(0, 0, 0, 0.2);
}

.task_layout {
  background-color: gray;
}

#jb-container {
  width: 940px;
  padding: 20px;
  margin: 10px auto;
  border: 1px solid #bcbcbc;
}

#jb-header {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #bcbcbc;
}

#jb-content {
  float: left;
  width: 580px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #bcbcbc;
}

#jb-sidebar {
  float: right;
  width: 260px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #bcbcbc;
}

#jb-footer {
  padding: 20px;
  clear: both;
  border: 1px solid #bcbcbc;
}

@media (max-width: 100vw) {
  /* #jb-container {
    width: auto;
  }

  #jb-content {
    float: none;
    width: auto;
  }

  #jb-sidebar {
    float: none;
    width: auto;
  } */
}
</style>

function e(e: any) {
  throw new Error('Function not implemented.');
}