Awesome
vue-assign-model
Automatically assign elements value to model for Vue.js
Installation
$ npm install vue-assign-model
Usage
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
<!-- mount elements -->
<input type="text" value="edit me" v-model="text">
/* assigned model */
data: {
text: "edit me"
}
Multiline text
<!-- mount elements -->
<textarea v-model="textarea">add multiple lines</textarea>
/* assigned model */
data: {
textarea: "add multiple lines"
}
Checkbox
<!-- mount elements -->
<input type="checkbox" value="1" v-model="checked" checked>
/* assigned model */
data: {
checked: true
}
Multiple checkboxes
<!-- mount elements -->
<input type="checkbox" value="Jack" v-model="checkedNames">
<input type="checkbox" value="John" v-model="checkedNames">
<input type="checkbox" value="Mike" v-model="checkedNames" checked>
/* assigned model */
data: {
checkedNames: ["Mike"]
}
Radio
<!-- mount elements -->
<input type="radio" value="One" v-model="picked">
<input type="radio" value="Two" v-model="picked" checked>
/* assigned model */
data: {
picked: "Two"
}
Select
<!-- mount elements -->
<select v-model="selected">
<option value="" disabled>Please select one</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected>C</option>
</select>
/* assigned model */
data: {
selected: "C"
}
Multiple select
<!-- mount elements -->
<select v-model="selectedMultiple" multiple>
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C" selected>C</option>
</select>
/* assigned model */
data: {
selectedMultiple: ["B", "C"]
}
Other
JSON of data-vue-model
is assigned to Vue model.
<!-- mount elements -->
<ul data-vue-model="{"items": ["Foo", "Bar"]}">
<li v-for="item in items">
{{ item }}
</li>
</ul>
/* 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.