bencodezen / vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
7.77k stars 1.32k forks source link

Simpler transparent wrappers checkbox and select example #184

Closed ghost closed 4 years ago

ghost commented 4 years ago

Hi, I'm having trouble with the checkboxes Simpler transparent wrappers. Could someone show me an example with checkboxes and selects? It's more tricky than input. I can't make it work.

ghost commented 4 years ago

I think I found the solution. Can I be told if it's ok that way?

<script>
export default {
  inheritAttrs: false,
  model: {
    event: 'update:checked'
  },
  props: {
    value: {
      type: Boolean,
      required: true,
    },
  },
}
</script>

<template>
  <BaseField>
    <label :class="value ? $style.checked : ''">
      <input
        type="checkbox"
        v-bind="$attrs"
        v-on="$listeners"
        :checked="value"
        @change="$emit('update:checked', $event.target.checked)"
      />
    </label>
  </BaseField>
</template>