Задать вопрос
nastya_zholudeva
@nastya_zholudeva
vue

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

Инпут, показывающий количество изменяет свою ширину в зависимости от ширины контента в нем. Контент меняется (увеличивается или уменьшается число) от нажатия на стрелочки
5a65f70336dda363922499.png
<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>


Как можно реализовать изменение ширины инпута в зависимости от размера его содержимого?
  • Вопрос задан
  • 182 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js 
data: () => ({
  value: '',
}),
computed: {
  style() {
    return {
      width: `${20 + this.value.length * 10}px`,
    };
  },
},

<input v-model="value" :style="style">
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик VUE (Senior, Middle+)
SOFT DIVISION • Ярославль
от 150 000 до 300 000 ₽
Второй ведущий разработчик (Fullstack, PHP, Laravel, Vue, Mysql)
Donatov.net
от 100 000 до 300 000 ₽
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Cоздать плоскую 3д модель ресниц для риггинга в AR приложении
10 мая 2024, в 13:13
1500 руб./за проект
Программа-тренажёр для решения задач целочисленного программирования
10 мая 2024, в 13:01
12000 руб./за проект
Разработка парсера на phyton
10 мая 2024, в 12:51
12500 руб./за проект
Ещё заказы