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

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

在一个 innerhtml 中，这个正在工作:

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

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

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

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

Answer 1

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