Trying to modify the style attribute of an object by entering a number or text details into the input field. Frustrated that it only allows changing part of the object and not the entire specification.
Seeking advice on how to replace the entire object specifying the style.
html
<div>
<label>Type width</label>
<input type="text" v-on:keydown.enter='defst($event.target.value)'>
<div :style='stylename'>kkk</div>
</div>js
new Vue({
el: '#exercise',
data: {
narrow:{
backgroundColor:'lemonchiffon',
width:150+'px'
},
medium:{
backgroundColor:'yellow',
width:250+'px'
},
large:{
backgroundColor:'orange',
width:350+'px'
},
xlarge:{
backgroundColor:'red',
width:500 +'px'
},
stylename:''
},
methods: {
defst(x){
console.log(x);
this.stylename=x
}
}
});Appreciate any help in advance.