Vue accessing loop index within input name

Asked Dec 05 '17 at 14:46

Active Dec 05 '17 at 15:02

Viewed 175 times

I am using Vue2 to loop through a data set and need to access the index within the input elements attribute as shown below. The problem is I am not binding to vue data entirely but just need the index. And using the colon syntax to bind will look for email within the vue data, which I don't want/need.

Currently, I am getting the following error:

Interpolation inside attributes has been removed.

Any idea how to accomplish this?

<div>
   <div class="row">
       <div class="col-md-12" v-for="(item, index) in contact.emails">
          <input :value="item.email" name="emails[{{ index }}][email]" />

edited Dec 05 '17 at 14:50

asked Dec 05 '17 at 14:46

AnchovyLegend

12,139
38
147
231

item is overloaded, both loops define it. On purpose? – dube Dec 05 '17 at 14:49
1

Please see edited, it should just be a single loop. – AnchovyLegend Dec 05 '17 at 14:51
so you want to bind the inputs to the property named "email" of each array element of contact.emails? – dube Dec 05 '17 at 14:53
I simply want the name attr values to be: `emails[0][email]`, `emails[1][email]`, `emails[2][email]`, etc. and 'email' is a string – AnchovyLegend Dec 05 '17 at 14:54
`:name="'emails[' + index + '][email]'"` – dfsq Dec 05 '17 at 15:02

Vue accessing loop index within input name

0 Answers0