Vue - изменить ширину ввода в соответствии с содержимым - PullRequest
Новая
       39

Vue - изменить ширину ввода в соответствии с содержимым

0 голосов
/ 14 октября 2019

Так что я могу сделать это (Pug & CoffeeScript) : 

input(placeholder="0", v-model.number="order[index]" v-on:change="adjustInput")
...
adjustInput: ->
    event.target.style.width = event.target.value.length + 'ch'

... но это работает, только если я изменяю вход вбраузер, от руки . Вход не меняет свою ширину, если изменяется v-model.

Как я могу сделать так, чтобы ширина ввода изменялась, даже если изменение вызвано Vue реактивностью?

1 Ответ

0 голосов
/ 14 октября 2019

Попробуйте это 

input(placeholder="0", v-model.number="order[index]" v-on:change="adjustInput" :style="{width: reactiveWidth}")

// Your secret Vue code
data() {
   return function() {
       reactiveWidth: 100px; // (some default value)
   }
},
methods: {
  adjustInput() {
     this.reactiveWidth = event.target.value.length + 'ch'
  }
},
computed: {
   reactiveWidth() {
     return this.number + 'ch';
  }
}

Поскольку я не знаю всех частей кода, вам, возможно, придется немного подправить это. Просто привязав this.number к order[index], вы никак не влияете на ширину ввода. Вычисляемое свойство слушает изменения в числе

...