Vue2 Multipe V-Models

A multiple v-model implementation for Vue2

Read about it here in detail
https://dev.to/michaelolof_/multiple-v-model-for-the-rest-of-us-1pb8

----------------------------

Installation

``bash
$ npm install --save vue2-multiple-vmodels
`
In main.js file
`js
import Vue from "vue"
import Vue2MultipleVModels from "vue2-multiple-vmodels";

Vue.use(Vue2MultipleVModels);
`

API

The library comes with 2 helper directives.
- v-models - Multiple 2 way binding for vue2
- v-model-destruct - Destructure a v-model object and bind directly to its fields

------------------------------

$3


The v-models directive gives you the power of multiple v-models just like in the new vue 3 feature.
You can create a component that supports v-models like this

SelectInput.vue
`html



`

This component can then be used like this

`html



`

Caveats
- Only works with custom components.
- v-models relies on data not props. Props can still be used to sync data the traditional way, but we register the data and the event not the prop
- All v-models events must be of the format with models: The v-models directive checks for this.
- Registeration of data and event is done in the models section when defining the component. models must be an array.

-----------------------------------

$3

Use full for existing/already defined components which emit objects.

Take a PhoneCountry component which emits an object as shown below
PhoneCountry.vue
`html



`

v-model-destruct allows you bind (2-way binding) directly to any of the fields you're interested in. E.g

`html



``

Caveats
- Only works with Components that emit objects or the value of v-model is an object.
- 2-way binding is limited to component design. If your component (E.g PhoneCountry) is not designed to track changes in object fields (E.g country field), changes made when you update country from the parent component might not update the child (PhoneCountry) component.