12

I have a form where I either have 1 client or 2 clients. I created a component for choosing the count, and another one for displaying client information form are (so if 2 clients, with v-for, 2 forms).

<div id="root">
   <count-section></count-section> // also emits the client count
   <infos
      v-for="(count, index) in total"
      :key="index"
      v-bind:index="count">
   </infos>
</div>

After seting up props, I could catch the count in my component.

In a innerhtml, this one is working working:

<h5>Person {{ count }} Info</h5>

Then I tried to generate an attribute combining string and it gave me error.

<input name="name-client-{{count}}"

name="name-client-{{count}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .

What is the proper way of achieving it? Did I thought about the flow the wrong way? I thought of having name-client-1 and name-client-2 together as bunch of all the other fields with same structure and use a for-loop on the backend.

senty
  • 12,385
  • 28
  • 130
  • 260
  • 2
    Possible duplicate of [How to solve Interpolation inside attributes has been removed. Use v-bind or the colon shorthand ? Vue.JS 2](https://stackoverflow.com/questions/43211760/how-to-solve-interpolation-inside-attributes-has-been-removed-use-v-bind-or-the) – Bert Aug 02 '17 at 05:10

1 Answers1

21

Using ES6 template string :name="`name-client-${count}`".

deivuss331
  • 291
  • 5
  • 13