CODEWITHSUNDEEP
vuejs2
user1170117
user1170117

Reputation: 153

Adding index to vuejs class

I spend a few hours on this and got somewhat further than I expected. But this seem to be a roadblock.

This is for an inventory form. So far everything seem to work correctly. In simple a new field will be added for each item in stock. The user can now pick the color, add a quantity and a comment.

The problems is that I can not figure out how to add the index value to the class. I can get the index value at the bottom but now when I add it to a class.

My other inputs look like this one. 

<input type="text" name="option[1][option_name]" class="form-control" id="example" value="blue">

However when I generate these they come up like this i cant figure out how to add the index number to the name. Any help is appreciated it. 

<input type="text" name="option[{{ index }}][quantity]">

https://codepen.io/virgiltu/pen/gqBwwj

Upvotes: 0

Views: 222

Answers (1)

Yom T.
Yom T.

Reputation: 9190

Simply bind the attribute (with v-bind:name or :name) and use template literals:

<input type="text" :name="`option[${index}][${option_name}]`" class="form-control" id="example" value="blue">

Upvotes: 1

Related Questions