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

设置 props 后，我可以在我的组件中捕捉到 count。

在一个内部html中，这个正在工作：

<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}`"。