vue点击按钮动态添加组件，且将组件数据绑定在表单中（飞机票出售系统-添加航班界面）

效果如图，点击按钮添加一行数据，且将数据绑定在表单中，控制台成功输出表单中填入的数据

 

按钮绑定事件

 <el-button type="primary" @click="addTicket()" 
style="background-color: #8d9fb7 ;border-color: #8d9fb7">
添加一种机票类型
</el-button>

先添加一个v-for循环渲染组件，并将数据绑定：

<div v-for="(ticket,index) in info.tickets" :key="index">
        <ticket :index="index" :tickets="info.tickets"> </ticket>
</div>

再定义组件内容 调用addTicket方法，向循环数组中添加一项数据：

export default {
  name: "addPlane",
  data() {

    return {
      labelPosition: 'right',
      info: {
        end_city: '',
        start_city: '',
        start_day:'',
        end_day:'',
        start_time:'',
        end_time:'',
        price:'',
        departure_airfield:'',
        arrival_airfield:'',
        tickets:[
          {count:"",
            number_all:""
          }
        ]
      },
    }

  },
  components: {
    ticket: {
      props:['index','tickets'],
      template:'<el-row> ' +
        '<el-col :span="2">&nbsp</el-col> ' +
        '<el-col :span="9">' +
        '<el-form-item label="折扣">' +
        '<el-input v-model="tickets[index].count"></el-input>' +
        '</el-form-item>  ' +
        '</el-col> ' +
        '<el-col :span="2">&nbsp</el-col> ' +
        '<el-col :span="9">' +
        '<el-form-item label="票数">' +
        '<el-input v-model="tickets[index].number_all"></el-input>' +
        '</el-form-item>  ' +
        '</el-col>' +
        '</el-row>'
    }
  },
  methods:{
    addTicket(){
      this.info.tickets.push({})
    },
    onSubmit() {
      console.log(this.info);

    }
  }
}

做法参考于vue 通过按钮点击动态添加组件_qq_37591637的博客-CSDN博客_vue点击按钮添加组件