Vue - conditional attribute binding

Question

I am making a form in a Vue component and would like to set the HTML attribute required to an input field based on the value I am having in an object property. So, for the example, an object that has fields like this:

label:"Name"
required:"1"
type:"textbox"

I need to a set the field to have required attribute in an input tag:

<input class="input is-large" :type="input.type" required>

And for the ones that don't have 1 as a value for that field I don't want a required attribute. How can I do that in Vue?

Vamsi Krishna · Accepted Answer · 2017-12-11 12:06:49Z

2

You can do it like this:

<input class="input is-large" :type="input.type" :required="obj.required == 1">

Since your object's required property has 1 as a string not number I used == for comparison so that equality is tested after coercion

answered Dec 11, 2017 at 12:06

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

Vue - conditional attribute binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related