VUE-how to change the style by typing the name of it

问题

I tried to change the part of the style attribute by input the number or any details in the text input. However, I want to replace the entire object specifying the style as below. But it only allows me to change the part of the object only.

What whould I do?

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:'organge',
      width: 350+'px'
    },
    xlarge:{
      backgroundColor:'red',
      width: 500 +'px'
    },
    stylename:''

  },
  methods: {

  defst(x){
    console.log(x);
    this.stylename=x
  }

}
});

Thank you in advance.

回答1:

change this part:

  defst(x){
    console.log(x);
    this.stylename=x
  }

to

  defst(x){
    console.log(x);
    this.stylename=this[x]
  }

来源：https://stackoverflow.com/questions/61553769/vue-how-to-change-the-style-by-typing-the-name-of-it