Javascript v模型未正确绑定到对象数组

我试图使用v-model将

cofounders

数组中的每个

cofounder\u模板

对象绑定到基于所选cofounder数量的表单输入

例如：

当

current\u num\u cofounders=3

然后

cofounders=[{cofounder\u template}，{cofounder\u template}，{cofounder\u template}]

遇到的问题：

我当前遇到的问题是，当我在

联合创始人[0]中输入一个值时。firstname

，所有其他

联合创始人[n]。firstname

将具有相同的值。 我不知道为什么会这样。请告知我做错了什么

HTML

<form id="app" class="container"> 
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="founders">Number of Cofounders</label>
            <select id="founders" class="form-control" @change="changeCofounders($event.target.value)">
                <option value="0" selected>Choose...</option>
                <option v-for="n in 20" :key="n" :value="n">{{ n }}</option>
            </select>
        </div>
    </div>
    <div class="cofounders" v-if="cofounders.length > 0" v-for="(cofounder,i) in cofounders" :key="i">
        <h4 class="font-weight-bold" >Cofounder {{i + 1}}</h4>
        <hr>
        <br>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="first_name">First Name</label>
                <input type="text" class="form-control" id="first_name" name="first_name[]" v-model="cofounders[i].first_name">
            </div>
            <div class="form-group col-md-6">
                <label for="last_name">Last Name</label>
                <input type="text" class="form-control" id="last_name" name="last_name[]" v-model="cofounders[i].last_name">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="phone">Phone</label>
                <input type="text" class="form-control" id="phone" name="phone[]" v-model="cofounders[i].phone">
            </div>
            <div class="form-group col-md-6">
                <label for="email_address">Email</label>
                <input type="text" class="form-control" id="email_address" name="email[]" v-model="cofounders[i].email">
            </div>
        </div>
    </div>
</form>

共同创始人人数
选择。。。
{{n}}
共同创始人{{i+1}}



名字
姓
电话
电子邮件

JavaScript

var app = new Vue({
    el: '#app',
    data(){
        return {
            current_num_cofounders: 0,
            cofounders: [],
            cofounder_template: {
                first_name: '',
                last_name: '',
                email: '',
                phone: '',
            }
        }
    },
    created(){
        console.log('main running')
    },
    methods:{
        changeCofounders (str_num) {
            let selected_num_cofounders = parseInt(str_num)

            //add when current is less than selected
            if(this.current_num_cofounders < selected_num_cofounders){
                this.cofounders = Array(selected_num_cofounders).fill(this.cofounder_template)
                this.current_num_cofounders = selected_num_cofounders
                console.log(this.cofounders)
            } 
            //remove when current is greater than selected
            if(this.current_num_cofounders > selected_num_cofounders){
                this.cofounders.splice(0, selected_num_cofounders)
                this.current_num_cofounders = selected_num_cofounders
                console.log(this.cofounders)
            }
        }
    }
})

var-app=新的Vue({
el:“#应用程序”，
数据（）{
返回{
当前联合创始人：0，
共同创始人：[]，
联合创始人模板：{
名字：''，
姓氏：“”，
电子邮件：“”，
电话：''，
}
}
},
创建（）{
console.log（'main running'）
},
方法：{
changeCofounders（str_num）{
让选定的\u num\u共同创建者=parseInt（str\u num）
//当前值小于选定值时添加
if（this.current_num_cofoundersselected_num_cofounders）{
this.cofounders.splice（0，所选的\u num\u cofounders）
this.current_num_cofounders=选定的_num_cofounders
console.log（this.cofounders）
}
}
}
})

您将同一对象指定给所有数组元素，因此它们会同时更改。解决方案是为每个数组元素创建自己的模板副本：

this.cofounders = [...Array(selected_num_cofounders).keys()]
  .map(x => Object.assign({}, this.cofounder_template))

---

这很有道理。谢谢你的帮助！！