https://github.com/outluch/vue-model-autoset

A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.
https://github.com/outluch/vue-model-autoset

javascript vue2 vuejs2

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/outluch/vue-model-autoset
• Owner: outluch
• License: mit
• Created: 2017-05-26T00:50:46.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-26T16:38:20.000Z (over 7 years ago)
• Last Synced: 2024-04-15T07:23:57.228Z (6 months ago)
• Topics: javascript, vue2, vuejs2
• Language: JavaScript
• Size: 8.79 KB
• Stars: 17
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-model-autoset

A [Vue.js](http://vuejs.org) plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

Imagine a huge form with 100+ fields.

```html

.......

100+

.......

```

You should init `filters` in `data()` fn for your parent component, if you want them be reactive

[Vue.js Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)

```js

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.

```js

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](http://opensource.org/licenses/MIT)