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.

Possible duplicate of How to solve Interpolation inside attributes has been removed. Use v-bind or the colon shorthand ? Vue.JS 2 — Bert
– Bert, Commented Aug 2, 2017 at 5:10

deivuss331 · Accepted Answer · 2021-02-27 19:49:12Z

31

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

answered Feb 27, 2021 at 19:49

deivuss331

4218 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Combining string & variable in element attribute in Vue component template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related