Vuejs inputbox or object
Vuejs inputbox or object
HTML
<div id="app">
<input :value ="det(details.a)" @keyup="details.a = $event.target.value">
<input :value="det(fields.two)" @keyup="fields.two = $event.target.value">
<input :value="det(fields.three)" @keyup="fields.three = $event.target.value">
<hr>
<pre>
{{details.a}}
{{details.b}}
{{details.c.x}}
<hr>
{{ fields.one }}
{{ fields.two }}
{{ fields.three }}
</pre>
</div>
JavaScript
App = new Vue({
el: '#app',
methods: {
det (param, event) {
// param = event.target.value
let strlen = param.length
if(1 === strlen){
return param
}
let split = param.split('.')
let details = JSON.parse(JSON.stringify(this.details))
for (var key in details) {
if(key == split[0]){
for (var key2 in details[key]) {
//details[key][key2] = event.target.value
return details[key][key2]
}
}else{
return param
}
}
}
},
data: {
d: 'Hello Vue.js!',
details: {
a: 'aa',
b: 'bb',
c: {
x: 'xx'
}
},
fields: {
one:'a',
two: 'b',
three: 'c.x'
}
}
});