Как добавить класс к элементу при наличии в нем текста во Vue.js?

Question

[Сергей Попов]

Существует общеизвестный (со стаковерфлоу) код по поводу добавления класса к инпуту после начала ввода: вешаем события на элемент и в случае, если строка не равна "" мы добавляем этот класс.
Отлично. А как сделать подобную штуку на vue.js?

var qs = document.querySelectorAll("form input");

for (let J = qs.length - 1;  J >= 0;  --J) {
    qs[J].addEventListener ("change",    adjustStyling, false);
    qs[J].addEventListener ("keyup",     adjustStyling, false);
    qs[J].addEventListener ("focus",     adjustStyling, false);
    qs[J].addEventListener ("blur",      adjustStyling, false);
    qs[J].addEventListener ("mousedown", adjustStyling, false);
    qs[J].addEventListener ("active",    adjustStyling, false)

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    qs[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal && inpVal.replace (/^\s+|\s+$/g, "")) // inpVal &&  inpVal.replace (/^\s+|\s+$/g, "") 
        zEvent.target.parentNode.classList.add('input-has-text');
    else
        zEvent.target.parentNode.classList.remove('input-has-text');
}

Answer 1

[0xD34F]

Просто динамически задаёте класс:

<input :class="а здесь выражение, определяющее, какие классы будут добавлены">

Несколько примеров того, как это может выглядеть.