选中 Vuejs Vuetify 时更改复选框图标

Question

所以我试图将复选框图标选中为更自定义的东西，也许是不同的图标，但是，我尝试了一些不同的东西，比如伪元素，但没有成功。现在它所做的是循环数据并显示名称，并在选中时根据 css class 突出显示它。我想做的是在选中时更改复选框图标。

css

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

Vuejs 组件。

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: () => ({
    
  }),
})

Answer 1

@chewie，可以在 Vuetify 中更改复选框图标，有一个 specia 道具可以处理这个

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

请在下面找到完整的代码

<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

选中 Vuejs Vuetify 时更改复选框图标

Change checkbox icon when checked Vuejs Vuetify

html

javascript

css

vue.js

vuetify.js