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

Question

[Илья Кочкин]

Доброго времени суток. Изучаю 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 со смещением плейсхолдера в левый верхний угол при вводе текста

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 от статуса переключения раидокнопок




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

код для примера тут

Answer 1

[Константин Б.]

Откуда у тебя в Vue вообще взялись classname inner text и т.д.
Vue построен на принципах реактивности. Это работает совсем по другому нежели у вас сделано. Все ваши данные дожны быть внутри data() и браться и вставляться туда же. Вы же в своём коде намешали и реактивность и работа с элементами через DOM
Посмотрите примеры Vue для начала

Comments

[Илья Кочкин]

у меня было подозрение что тут какой то конфликт пойдет от чистого js и vue все таки из за этого но думал что прокатит и так...

[Илья Кочкин]

хорошо, я наверное не догоняю а как мне при минтированнии vue перебрать все инпуты с плейсхолдерами и нагенерировать элементы span и вставить в нужное место с помощью vue.js? (я конечно могу руками все спаны прописать в шаблоне но хочется хоть какой то автоматизации)

[Константин Б.]

Илья Кочкин, перенести форму в шаблон Vue и работать с ней там

Answer 2

[Rsa97]

По уму в vue это делается по другому. Напишите свой компонент, который будет содержать input, span и всё, что с ними связано. Потом просто используйте это компонент во всех местах, где требуется.