CODEWITHSUNDEEP
vuejs2
Leff
Leff

Reputation: 1276

Vue class binding on this input field

I would like to bind a class on the input field where this class is suppose to be applied. In my case I have input fields that I am dynamically creating and since I can't bind values with v-model for input fields that are dynamically created I can't bind the class with v-model data. This are the fields that I am creating inside of v-for loop:

  <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>

I would like to know how can I bind a class now with that input field, so that I can check if the input field has some kind of value, so for example something like this:

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

Hoe can I do that with Vue?

Upvotes: 1

Views: 1725

Answers (1)

Thomas Ferro
Thomas Ferro

Reputation: 2442

I think that you're trying to do a class binding using the Object Syntax

In your example, to apply the CSS class hasValue if your input has any value that isn't falsy, you'll have something like this :

<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>

Upvotes: 1

Related Questions