Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/midnightsuyama/vue-assign-model

Automatically assign elements value to model for Vue.js
https://github.com/midnightsuyama/vue-assign-model

vue

Last synced: about 1 month ago
JSON representation

Automatically assign elements value to model for Vue.js

Awesome Lists containing this project

README

        

# vue-assign-model

[![npm version](https://badge.fury.io/js/vue-assign-model.svg)](https://badge.fury.io/js/vue-assign-model)
[![CircleCI](https://circleci.com/gh/midnightSuyama/vue-assign-model.svg?style=shield)](https://circleci.com/gh/midnightSuyama/vue-assign-model)

Automatically assign elements value to model for Vue.js

## Installation

$ npm install vue-assign-model

## Usage

```javascript
import Vue from 'vue'
import VueAssignModel from 'vue-assign-model'

Vue.use(VueAssignModel)
```

Before Vue rendering, `value`, `checked` or `selected` attributes of elements with `v-model` is automatically assigned to Vue model.

## Example

### Text

```html

```

```javascript
/* assigned model */
data: {
text: "edit me"
}
```

### Multiline text

```html

add multiple lines
```

```javascript
/* assigned model */
data: {
textarea: "add multiple lines"
}
```

### Checkbox

```html

```

```javascript
/* assigned model */
data: {
checked: true
}
```

### Multiple checkboxes

```html

```

```javascript
/* assigned model */
data: {
checkedNames: ["Mike"]
}
```

### Radio

```html

```

```javascript
/* assigned model */
data: {
picked: "Two"
}
```

### Select

```html

Please select one
A
B
C

```

```javascript
/* assigned model */
data: {
selected: "C"
}
```

### Multiple select

```html

A
B
C

```

```javascript
/* assigned model */
data: {
selectedMultiple: ["B", "C"]
}
```

### Other

JSON of `data-vue-model` is assigned to Vue model.

```html



  • {{ item }}


```

```javascript
/* assigned model */
data: {
items: ["Foo", "Bar"]
}
```

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/midnightSuyama/vue-assign-model.

## License

The module is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).