<template>
  <div class="hello">
    <MultipleStateCheckbox
            :value="items"
            @input="onInput"
            labelName="name"
            valueName="id"
            :renderLabel="renderLabel"
            uniqueDataField="id"
            groupedBy="cat"
            :deleteButton="true"
    ></MultipleStateCheckbox>
  </div>
</template>

<script>
  import MultipleStateCheckbox from './MultipleStateCheckbox'
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    components: {
      MultipleStateCheckbox
    },
    methods: {
      onInput(item){

      }
    },
    data(){
      return {
        renderLabel: (label, value, item) => {
          return '<span>A</span>' + label + value
        },

        items: [
          {
            id: 1,
            name: 'test1',
            selected: 0,
            cat: 'aaaaaaaa'
          },
          {
            id: 2,
            name: 'test2',
            selected: 1,
            cat: 'bbbb'
          },
          {
            id: 3,
            name: 'test3',
            selected: 2,
            cat: 'aaaaaaaa'
          },
          {
            id: 4,
            name: 'test4',
            selected: 0,
            cat: 'bbbb'
          },
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>
