Appearance

Value Model Mixin ​

File Information ​

  • Path: mixins/ValueModel.js
  • Purpose: Simple v-model wrapper for boolean values

Overview ​

The Value Model mixin provides a simple two-way binding wrapper for boolean values. It creates a local model property that syncs with the value prop and emits input events, enabling v-model functionality for components.

Key Features ​

  1. Two-Way Binding

    • Syncs prop to local model
    • Emits input events
    • Reactive updates

  2. Simple Implementation

    • Minimal code
    • Automatic syncing
    • Vue reactivity

Props ​

javascript
{
  value: {
    type: Boolean,
    default: false,
    description: 'Boolean value prop for v-model'
  }
}

Data Properties ​

javascript
{
  model: boolean  // Local model value (initialized from prop)
}

Watchers ​

value ​

Watches value prop changes:

  • Updates local model when prop changes
  • Keeps model in sync with prop

model ​

Watches model changes:

  • Emits input event when model changes
  • Enables v-model functionality

Usage Examples ​

Basic Usage ​

vue
<template>
  <div>
    <input
      type="checkbox"
      v-model="model"
    />
    <p>Value: {{ model }}</p>
  </div>
</template>

<script>
import valueModel from '~/mixins/value-model'

export default {
  mixins: [valueModel]
  // Component can now be used with v-model
}
</script>

Parent Component ​

vue
<template>
  <MyComponent v-model="isEnabled" />
</template>

<script>
export default {
  data() {
    return {
      isEnabled: false
    }
  }
}
</script>

How It Works ​

  1. Initialization

    • model is initialized from value prop
    • Component has local state

  2. Prop Update

    • When value prop changes, model updates
    • Watcher syncs prop to model

  3. Model Update

    • When model changes, input event is emitted
    • Parent component receives update
    • v-model updates parent value

Integration Points ​

  • Form Components: Checkbox, toggle components
  • Dialog Components: Visibility toggles
  • Any Component: That needs v-model for boolean

Notes for Development ​

  • Mixin is very simple and lightweight
  • Only works with boolean values
  • Provides standard v-model pattern
  • Automatic two-way binding
  • Minimal overhead