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="{&quot;items&quot;: [&quot;Foo&quot;, &quot;Bar&quot;]}">
  <li v-for="item in items">
    {{ item }}
  </li>
</ul>

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