Skip to content
A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Kill webpack etc. Bump version May 26, 2017
.npmignore
LICENSE
README.md Updated README.md May 26, 2017
index.js
package.json

README.md

vue-model-autoset

A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

Imagine a huge form with 100+ fields.

<input v-model="filters.name" />
<my-slider v-model="filters.price_min" />
<my-slider v-model="filters.price_max" />
.......
100+
.......
<my-checkbox v-model="filters.only_good_offers" />

You should init filters in data() fn for your parent component, if you want them be reactive Vue.js Change-Detection-Caveats

data() {
  return {
    filters: {
      name: null,
      price_min: null,
      price_max: null,
      ...
      ...
      only_good_offers: null
    }
  }
}

And now you need to keep them in sync, or you will get weird bugs. It is frustrating. vue-model-autoset does this for you. Define your filters: {} and forget. Just write your template and it will just work.

Installation

1.) Install package via NPM
$ npm install vue-model-autoset
2.) Install plugin within project.
import Vue from 'vue';
import VueModelAutoset from 'vue-model-autoset';

Vue.use(VueModelAutoset)

Notes

Killed webpack etc, so this package now can be used only in webpack projects. No simple include script usage.

Contribution

I appreciate any comments, feedback, and information about potential issues. Have you experienced a bug or noticed a mistake in documentation? Please add a new issue. Thanks!

License

MIT

You can’t perform that action at this time.