cannot bind name attribute with dynamic value

Question

I have a <table> that has multiple columns, each having an <input> with a name attribute. To make the name unique, I want to append the row and column index. How do I bind <input name="label['0'][cindex]"> (where cindex is an integer from zero to n-1) in my Vue template?

<th v-for="(col, cindex) in cols" :key="cindex" :col="col">
  <div class="input-group">
    <input type="text" name="label['0'][cindex]" placeholder="Add Label" value="" v-model="column_labels[cindex]" class="form-control label text-center">
    ...
  </div>
</th>

you should to bind the name attribute using v-bind or : — Christian Carrillo
– Christian Carrillo, Commented Aug 31, 2019 at 3:55

tony19 · Accepted Answer · 2019-08-31 05:42:04Z

2

You need to use Vue's bindings by prefixing the name with a colon, then construct the name as a string:

:name="'label[\'0\'][' + cindex + ']'"

The entire input field:

<input type="text" :name="'label[\'0\'][' + cindex + ']'" placeholder="Add Label" value="" v-model="column_labels[cindex]" class="form-control label text-center" />

edited Aug 31, 2019 at 5:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 31, 2019 at 3:56

B. Fleming

7,2501 gold badge21 silver badges37 bronze badges

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

2 Comments

samjad ps Over a year ago

can i store full tr to database even with new input field? when i store input value get not storing

B. Fleming Over a year ago

@samjadps This isn't really a question I can answer here. There is a lot of information I don't have that I would need. I would recommend asking a new question about that specific problem with enough detail to understand what the desired behavior is and what behavior you're seeing instead, and I would suggest including the relevant front-end and back-end code in that new question as well so we can properly examine what your code is doing.

Collectives™ on Stack Overflow

cannot bind name attribute with dynamic value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related