Как установить класс для ввода, когда данные возвращаются из API. Vue

Question

У меня есть входы с метками, которые увеличиваются, когда на входе есть данные, например, материализация (https://materializecss.com/text-inputs.html). Я использую свою функцию checkInputData, чтобы проверить, имеет ли input какое-либо значение, и установил класс with-data. Он работает, когда пользователь вводит некоторые данные для ввода, но когда я инициализирую компонент и данные, возвращаемые из API, это не работает.

Как я могу установить класс «с данными» для моего ввода, когда данные возвращаются из API ?

My HTML

<input type="text" :value="name" @input="setName($event.target.value); checkInputData($event);" />
<label class="input-label">name</label>

функция checkInputData

checkInputData(event) {
    let input = event.target;
    let hasValueClass = 'with-data';

    if(input.value != '') {
        input.classList.add(hasValueClass);
    } else {
        input.classList.remove(hasValueClass);
    }
},

Answer 1

Используйте v-модель для 2-сторонней привязки и используйте ее для изменения класса (она будет игнорировать свойство :value).

<input type="text" v-model="nameValue" :class="{'with-data' : nameValue !== ''}" @input="setName($event.target.value);" />
<label class="input-label">name</label>

в data add nameValue собственность также.

data(){
   return {
      /*other values*/
      nameValue:''
   }
}