Javascript 如何在api返回数据时将类设置为input。Vue

我有一些输入，当输入有数据时，标签会上升，比如materialize（）。 我使用checkInputData函数检查输入是否有任何值，并设置“with data”类。当用户输入一些要输入的数据时，它工作，但当我初始化组件和从api返回的数据时，它不工作

当从api返回数据时，如何将“with data”类设置为输入

我的HTML

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

用于双向绑定并用于更改类（它将忽略

：value

属性）

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

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

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

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