skyrpex / props-to-local

Vue mixin that maps props to local data

Props To Local

Works with:

This mixin will sync down properties to local data. This allows defining a property that can be changed within the component (using v-model, for example).

A case of use is creating a checkbox component that that can be correctly toggled without passing down a value through a prop.

Installation

npm install @skyrpex/props-to-local

Usage

<template>
  <input type="checkbox" v-model="local.value" @change="$emit('input', $event.target.checked)">
</template>

<script>
import propsToLocal from '@skyrpex/props-to-local';

// In this example, a 'value' prop is given to propsToLocal.
export default {
  mixins: [
    propsToLocal({
      // Normal props here
      value: {
        type: Boolean,
        default: false,
      },
    }),
  ],
};
</script>

The above example will generate the following component:

export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      local: {
        // Will default to false, as stated above.
        value: this.value,
      },
    };
  },
};

Options

<script>
import { identity } from 'lodash';
import propsToLocal '@skyrpex/props-to-local';

export default {
  mixins: [
    propsToLocal({
      value: {
        type: Boolean,
        default: false,
        // Watch prop changes deeply (defaults to false).
        deep: false,
        // Format props before overwriting local values (defaults to Lodash.Identity).
        format: identity,
      },
    }),
  ],
};
</script>