VUE - как изменить стиль, набрав его название

Question

Я попытался изменить часть атрибута стиля, введя число или любые детали в текстовом поле. Тем не менее, я хочу заменить весь объект, указав стиль, как показано ниже. Но это только позволяет мне изменить только часть объекта.

Что мне делать?

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
  }

}
});

Заранее спасибо.

Answer 1

изменить эту часть:

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

на

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