Combining string & variable in element attribute in Vue component template

Question

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.

Answer 1

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