vue实现在新增单位的表单弹框中点击新增子公司功能

Question

问题描述

原型设计上需求是在新增一个公司的时候，在新增公司弹出框的表单中再添加一个新增该公司子公司的功能，而且这个增加子公司的功能每次点击都会增加一段这个子公司信息的输入框，也就是说如果点击10次，下面应该有10个关于子公司输入框的内容，如下图所示：
点击第一次的时候：

点击第二次的时候会在增加一行关于子公司的信息：

相关代码

vue的html部分：

    <el-row :gutter="20">
        <el-col :span="24">
          <el-button type="primary" @click="creatSubcompany" > 新增子公司 </el-button>
        </el-col>
      </el-row>
      <div class="subcompany"  v-for="index in subcompanyList" :key="index">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="子公司名称">
              <el-input type="text" v-model="subcompany.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人">
              <el-input type="text" v-model="subcompany.leader"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input type="text" v-model="subcompany.tel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      
    js部分：
    
    export default {
          data() {
            return {     
              subcompany: {
                name: '',
                leader: '',
                tel: '',
                provice: '',
                city: '',
                region: ''
              },      
              subcompanyList: []
            }
          },
          methods: {
             creatSubcompany() {
              this.subcompanyList.push({
                name: '',
                leader: '',
                tel: '',
                provice: '',
                city: '',
                region: ''
              })
              console.log(this.subcompanyList)
            }            
          }
        }

虽然这种情况下新增是可以实现效果，但是报如下错误：

如果我将 ：key="index" 去掉的话倒是不报错，但是不应该是这样，另外还有一个问题，这样新增的过程中表单的v-model绑定的键名称相同，所以输入框中的值是写一个，多个值都相同， 还有一点就是不清楚这个值要符合获取

你期待的结果是什么？实际看到的错误信息又是什么？

期待的结果是 ： 可以这样点击新增子公司，每次点击新增的面板中的 输入框中的值输入都对其他的子公司不产生影响，并且可以正常的获取到这些子公司的值。

目前这块自己想不太通，转换成vue的思想很多情况就不清楚该如何处理，所以在此求教，请各位大神不吝赐教。
谢谢！

Answer 1

v-for="subcompany in subcompanyList" :key="subcompany.name"

然后js部分去掉data中的subcompany对象。

Answer 2

在 vue 里，:key 的作用是方便 vue 辨识 DOM，这样，如果在重新渲染时遇到和之前完全相等的 key，就可以不用渲染，节省时间。所以写的时候就要用简单可识别的值，比如 id，或者索引。

你的问题是 index in list 得到的是 list 里的某个对象，而不是真正的索引，你可以 (subCompany, index) in list 就可以了。

还是建议好好看两遍文档。

Answer 3

报错信息说了，请使用一个primitive 值作为key。v-for="index in list",中得到的index是一个对象，不是一个primitive值。你可能是想这样子v-for=“(item,index) in list”