在Vue组件模板中的元素属性中组合字符串和变量

Question

我有一个表格，其中有 1 个客户或 2 个客户。我创建了一个用于选择计数的组件，另一个用于显示客户端信息表单是（因此如果有 2 个客户端，使用 v-for，2 个表单）。

<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>

设置道具后，我可以count在我的组件中捕获。

在innerhtml中，这个正在工作：

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

然后我尝试生成一个属性组合字符串，但它给了我错误。

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

name="name-client-{{count}}"：属性内部的插值已被删除。请改用 v-bind 或冒号简写。例如，代替 ，使用 。

实现它的正确方法是什么？我是否以错误的方式考虑了流程？我想过将 name-client-1 和 name-client-2 作为一堆具有相同结构的所有其他字段放在一起，并在后端使用 for 循环。

Answer 1

使用 ES6 模板字符串:name="`name-client-${count}`"。