Change checkbox icon when checked Vuejs Vuetify

user_15018590 0
Viewed 3524

So I am trying to check the checkbox Icon to something more custom, perhaps a different icon, however, I tried a couple different things like pseudo elements with no success. right now what this does is loops through data and displays the name and when checked highlights it based on the css class. What I am trying to do is when check change the checkbox icon.

css

.unchecked{
  color: gray;
}
.checked{
  background-color: #ffff00;
}

Vuejs Component.

Vue.component('check-list', {
    template: `
            <v-container>
                <v-row >
                  <v-col >
                      <v-checkbox 
                        v-for="item in values" 
                        :key="item.id" 
                        :value="item.id" 
                         v-model="selected"
                        >
                       
                          <template v-slot:label>
                              <div :class="selected.includes(item.id) ? 'checked' : 'unchecked'">
                               {{item.name}}
                              </div>
                          </template>
                          
                        </v-checkbox>
                  </v-col>
                </v-row>
              <pre>{{selected}}</pre>
            </v-container>  
  `,
  data: function () {
    return {
     selected: [],
     values: [
                {id:'1',name:'Name 1'},
                {id:'2', name:'Name 2'},
                {id:'3', name:'Name 3'},
        ],   
     ex4: ['red']  
    }
  },
  methods: {
    
  },
})


new Vue({
  el: '#components-demo',
  vuetify: new Vuetify({
      icons: {
        iconfont: 'md',
    },
  }),
  data: () => ({
    
  }),
})
vuetify.js vue.js css html javascript
1 Answers

@chewie, it is possible to change the checkbox icon in Vuetify, There is a specia prop to handle this

:on-icon="'icon-name'" :off-icon="'icon-name'"

Please find the full code below

<div id="app">
  <v-app id="inspire">
    <v-container
      class="px-0"
      fluid
    >
      <v-row >
                  <v-col >
                      <v-checkbox
                        :on-icon="'mdi-heart'"
                        :off-icon="'mdi-home'"
                        v-for="item in values" 
                        :key="item.id" 
                        :value="item.id" 
                         v-model="selected"
                        >
                       
                          <template v-slot:label>
                              <div :class="selected.includes(item.id) ? 'checked' : 'unchecked'">
                               {{item.name}}
                              </div>
                          </template>
                          
                        </v-checkbox>
                  </v-col>
                </v-row>
              <pre>{{selected}}</pre>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      selected: [],
     values: [
                {id:'1',name:'Name 1'},
                {id:'2', name:'Name 2'},
                {id:'3', name:'Name 3'},
        ],   
     ex4: ['red'] 
    }
  },
})

Please find the working codepen here: https://codepen.io/chansv/pen/QWdEPvB?editors=1010

user_105557850
Related