この入力フィールドでのVueクラスバインディング

Question

このクラスが適用されると思われる入力フィールドにクラスをバインドしたいとします。私の場合、私は動的に作成している入力フィールドと、動的に作成された入力フィールドの値をvモデルとバインドできないため、クラスをv-modelデータでバインドできません。 これは私がv-forループの内部で作成していますフィールドです：入力フィールドはいくつかの種類を持っている場合、私がチェックできるように、私は、私はその入力フィールドで、今クラスをバインドする方法を知っていただきたいと思い

<template v-for="input in ninjaForm.fields"> 
    <div class="control"> 
     <input 
     class="input is-large" 
     :class="{ hasValue: input.value }" 
     :ref="input.label.toLowerCase()" 
     :type="input.type" 
     :name="input.label.toLowerCase()" 
     :required="input.required == 1"> 
     <label>{{ input.label }}</label> 
    </div> 
    </template> 

例えば、次のようなものです：

:class="{ 'has-value' : this.input.value != ''}" 

私はVueでこれを行うことができますか？

Answer 1

私はあなたの入力がfalsyないいずれかの値を持っている場合、あなたはこのようなものがあるでしょうあなたはCSSクラスhasValueを適用するために、あなたの例ではclass binding using the Object Syntax

をやろうとしていると思います：

<input 
    class="input is-large" 
    :class="{ hasValue: input.value }" 
    :ref="input.label.toLowerCase()" 
    :type="input.type" 
    :name="input.label.toLowerCase()" 
    :required="input.required == 1"> 
<label>{{ input.label }}</label>