我有一个表格,我有 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 循环。
最佳答案
使用 ES6 模板字符串 :name="`name-client-${count}`"
.
关于javascript - 在Vue组件模板中的元素属性中组合字符串和变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45451858/