Vue循环中如何为输入框id逐次自增1？现有代码id未生效

我来帮你排查这个问题～你当前的代码里，输入框的id没有按预期变化，核心原因是没有使用Vue的动态属性绑定语法，导致表达式没有被解析，直接当成了静态字符串。

问题分析 #

你写的代码里：

<input type="text" class="form-control" v-model="book.details" id="'transliterateTextarea'+(index+1)">

这里的id是静态属性，Vue不会解析里面的'transliterateTextarea'+(index+1)表达式，而是直接把整个字符串作为id值，最终渲染出来的id会是'transliterateTextarea'+(index+1)，而不是你想要的transliterateTextarea1、transliterateTextarea2这类动态值。

解决方案 #

要让Vue解析id的表达式，必须使用动态属性绑定，也就是用:id（v-bind:id的简写）来绑定id属性，然后在表达式里正确拼接字符串。有两种常用写法：

写法1：ES6模板字符串（更直观）

用模板字符串拼接变量，语法更清晰：

<input type="text" class="form-control" v-model="book.details" :id="`transliterateTextarea${index + 1}`">

写法2：传统字符串拼接

如果项目不支持ES6模板字符串，也可以用加号拼接：

<input type="text" class="form-control" v-model="book.details" :id="'transliterateTextarea' + (index + 1)">

修正后的完整代码 #

把上面的写法替换到你的代码中，完整代码如下：

<div id="app">
  <div class="row" v-for="(book, index) in seziure" :key="index">
    <div class="col-md-8">
      <div class="form-group label-floating">
        <label class="control-label"> Details</label>
        <input type="text" class="form-control" v-model="book.details" :id="`transliterateTextarea${index + 1}`">
      </div>
    </div>
  </div>
  <a @click="addNewRow">Add Another</a>
</div>

这样修改后，每次循环时index从0开始，index+1就会生成1、2、3...的递增数字，对应的id就会变成transliterateTextarea1、transliterateTextarea2，完全符合你的需求啦～

内容的提问来源于stack exchange，提问作者coder