Vue prop assignment string concat returns NaN

Question

This is just a very simple Vue code but I can't get it to work.

<input type="text" :class="'required-class' + custom_class" />

and my props is

props:{
    custom_class:{type:String}
      }

expected output:

<input type="text" class="required-class some-class-submitted" />

but returns:

<input type="text" class="NaN some-class-submitted" />

P.S I'm aware I can achieve this using the computed property, but is there any simpler solution without using it?

tony19 · Accepted Answer · 2022-07-15 01:54:28Z

1

You cannot bind to the class property that way, instead do this: <input type="text" class="required-class" :class="[custom_class] " />

I recomend you read the documentation for binding classes and styles it is very well explained there https://v2.vuejs.org/v2/guide/class-and-style.html

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 18, 2018 at 3:56

2863 silver badges10 bronze badges

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

1 Answer 1