A Vue.js plugin for data initialization
npm install vue-data-scooper
As the official Vue.js document says:
> v-model will ignore the initial value, checked or selected attributes
> found on any form elements.
> (https://vuejs.org/v2/guide/forms.html)
However, you can initialize the Vue instance data from form elements with this plugin.
Suppose that we have the following element within a HTML document:
``html`
Then, we can mount a Vue instance on it.
`javascript
import Vue from 'vue/dist/vue.esm'
import VueDataScooper from "vue-data-scooper"
Vue.use(VueDataScooper)
document.addEventListener("DOMContentLoaded", () => {
new Vue({
el: "#customer-form"
})
})
`
The above code works as if you wrote as follows:
`javascript
import Vue from 'vue/dist/vue.esm'
document.addEventListener("DOMContentLoaded", () => {
new Vue({
el: "#customer-form",
data: {
customer: {
name: "john",
plan: "A",
approved: true,
gender: "",
remarks: "Good"
}
}
})
})
`
Note that the
let parser = new DOMParser(template)
let doc = parser.parseFromString(template, "text/html")
getInitialData(doc) // => { user: { name: 'Alice', approved: true } }
Development Setup
bash
install dependencies
yarn installtest
yarn test
`You need the Google Chrome version 59 or higher to run test.
If you use
, export CHROME_BIN environment variable:`bash
export CHROME_BIN=$(which google-chrome-beta)
`Building for distribution
bash
yarn build
``* vue-remote-template
* vue-rails-form-builder
vue-data-scooper is released under the MIT License.