Skip to content
Automatically assign elements value to model for Vue.js
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src Init Aug 12, 2017
test
.babelrc
.gitignore
README.md
circle.yml
package.json
webpack.config.js
yarn.lock

README.md

vue-assign-model

npm version CircleCI

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="{&quot;items&quot;: [&quot;Foo&quot;, &quot;Bar&quot;]}">
  <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.

You can’t perform that action at this time.