Как можно реализовать изменение ширины инпута в зависимости от размера его содержимого?

Question

[nastya_zholudeva]

Инпут, показывающий количество изменяет свою ширину в зависимости от ширины контента в нем. Контент меняется (увеличивается или уменьшается число) от нажатия на стрелочки

<div class="main-catalog-list-count">
                        <span class="box-counter">
                            <span class="counter__link counter__link-prev"><i class="icon-arrow-down icon-arrow-top" @click="counterNext($event)"></i></span>
                            <span class="counter__input">
                                <input type="text" v-model="good.count"  disabled class="js-width-dynamic"><span> шт.</span>
                            </span>
                            <span class="counter__link counter__link-next"><i class="icon-arrow-down" @click="counterPrev($event)"></i></span>
                        </span>
                        <span class="main-catalog-list-count__devide"><i class="icon-close"></i></span>
                        <span class="main-catalog-list-count__col-name">
                            <a href="#win_7" class="js-fancybox">
                                <span class="main-catalog-list-count__name">«{{good.brend}}»</span>
                                <span class="main-catalog-list__price"><b v-html="sup(good.price.toString())"></b></span>
                            </a>
                        </span>
                        <span class="main-catalog-list-count__devide">=</span>
                        <span class="main-catalog-list-count__col-total">
                            <span class="main-catalog-list-count__name">итого</span>
                            <span class="main-catalog-list__price"><b v-html="sup((good.count * good.price).toString())"></b> <span class="rub">;</span></span>
                        </span>
                    </div>

Как можно реализовать изменение ширины инпута в зависимости от размера его содержимого?

Answer 1

[0xD34F]

data: () => ({
  value: '',
}),
computed: {
  style() {
    return {
      width: `${20 + this.value.length * 10}px`,
    };
  },
},

<input v-model="value" :style="style">

Comments

[Artem0071]

А почему не в computed?

[0xD34F]

Действительно. Затупил. Поправил ответ.