Не могу понять как работает v-if vue.js?

Доброго времени суток. Изучаю vue и возник вопрос/проблема. Есть форма заказа в ней поля
поля имеют вот такую верстку:
<div class="groupinput groupinput--required groupinput--recipient">
          <input class="formControl formControl--XXL" required id="recipientName" name="recipient[name]" placeholder="Имя получателя" type="text" v-model.leazy="recipient.name">
        </div>

смысл такой что плейсхолдер скрыт (стилем), в методе mounted генерируется span на основе плейсхолдера и вставляется в div.groupinput после дочернего input'а, а сделано это с целью. красивого оформления input со смещением плейсхолдера в левый верхний угол при вводе текста
BAJDwsHge8Q.jpg
mounted: function () {
            let elem=document.querySelectorAll('.groupinput [placeholder]');
            elem.forEach(function (item,index) {
                let html= document.createElement('span');
             html.className='for-'+item.getAttribute('name');
             html.innerText=item.getAttribute('placeholder');
             console.log(html);	
             item.after(html);

            });
        },

есть 2 дива которые контролируются v-if от статуса переключения раидокнопок
Sojx9S4FJ58.jpg

egUhI2U-lDc.jpg

и проблема заключается в том что при переключении в блоке v-if не "уничтожаются" все элементы,а именно сохраняется сгенерированный Span (причем не все) и он автоматически вставляется в другой блок v-if хотя по логике должен тоже уничтожитсяx. кто сможет объяснить в чем дело?

код для примера тут
  • Вопрос задан
  • 133 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Kostik_1993
Fullstack Web Developer | PHP | Laravel | Vue.js
Откуда у тебя в Vue вообще взялись classname inner text и т.д.
Vue построен на принципах реактивности. Это работает совсем по другому нежели у вас сделано. Все ваши данные дожны быть внутри data() и браться и вставляться туда же. Вы же в своём коде намешали и реактивность и работа с элементами через DOM
Посмотрите примеры Vue для начала
Ответ написан
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
По уму в vue это делается по другому. Напишите свой компонент, который будет содержать input, span и всё, что с ними связано. Потом просто используйте это компонент во всех местах, где требуется.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы