解決三層 v-for循環數據後v-model綁定el-input 時遇到的坑

关注

原创最新推荐文章于 2026-06-25 07:15:00 发布 380 阅读 AI 写同款· GEO 优化 ›

动态添加Vue组件——使用v-for指令实现动态创建el-input 接下来，我们将创建一个Vue实例，并在其模板中添加一个按钮和一个包含el-input的容器，用于显示动态添加的输入框。通过使用v-for指令和Vue的响应式数据，你可以轻松地实现这个功能。在Vue前端开发中，有时候我们需要根据特定的需求动态地添加组件。现在，运行上述代码，你将看到一个页面上有一个按钮和一个空的输入框容器。每当你点击按钮时，页面上将动态添加一个新的输入框。除了基本的输入框属性，你可以根据自己的需求为每个输入框定义更多的属性，例如样式、验证规则等。的数组，用于存储动态添加的输入框的数据。阅读详情

因為是要從服務器拿數據下來並在原數據的基礎上進行更改如下圖效果

<el-table-column label="ContactWindow" align="center" width="150">
              <template slot-scope="scope">
                <template v-if="scope.row.contacts">
                  <el-input v-for="(item,index) in scope.row.contacts" :key="index" v-model="item.contactWindow" size="mini" class="edit-input">
                    <!-- supplierContactWindow -->
                  </el-input>
                </template>
                  <span v-for="(item,index) in scope.row.contacts" v-else :key="index">{{ item.contactWindow }}</span>//v-else要放在el-for後面
              </template>
            </el-table-column>

v-model v-model=“contacts[index]” 這種寫法不行

收录于