method status

main-component.vue

<template>
  <div class="pa-4">
    <v-chip 
      v-for="item in sortedItems" 
      :class="itemClass(item)"
      :key="item.value"
      @click="onClickItem(item)">
      {{ item.text }}
    </v-chip>
    {{ selectedItems }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ text: 'foo', value: 1 }, { text: 'bar', value: 2 }],
      selectedItems: []
    }
  },
  computed: {
    sortedItems() {
      return this.items.slice().sort((a, b) => a.value - b.value)
    }
  },
  methods: {
    itemClass(item) {
      if (this.selectedItems.includes(item)) return 'primary white--text'
    },
    onClickItem(item) {
      if (this.selectedItems.includes(item)) {
        this.selectedItems = this.selectedItems.filter(
          v => v.value !== item.value
        )
        return
      }
      this.selectedItems.push(item)
    }
  }
}
</script>