Vue class binding on this input field

Question

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?

Do you want something like this? jsfiddle.net/943bx5px/12 if you enter color "red" or "green" you can see the input value bind to the class — samayo
– samayo, Commented Dec 12, 2017 at 13:51
But, like I stated in the question, I get an error when I bind class with v-model, since I am creating fields dynamically. — Leff
– Leff, Commented Dec 12, 2017 at 13:54
what fields are you creating dynamically? Please clarify your question. I don't even see your v-model in the example — samayo
– samayo, Commented Dec 12, 2017 at 13:55

tony19 · Accepted Answer · 2022-07-16 00:31:05Z

1

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>

edited Jul 16, 2022 at 0:31

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 12, 2017 at 12:34

Thomas Ferro

2,45221 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leff Over a year ago

Yes, my syntax was wrong but even with your correct syntax, I am not able to bind the class to any data value like the values from v-model, so that is what I am looking for, some way to bind a value with that specific input and not with some value from the component data object.

Collectives™ on Stack Overflow

Vue class binding on this input field

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related