vue动态创建input

<template>
  <div class="forInput">
    循环动态添加input:
    <p v-for="(item, index) in arr" :key="item.value">
      <a-input
        style="width: 100px"
        type="text"
        v-model="item.customItem"
        @change="input1Change(item.customItem)"
      />
    </p>
    <a-button @click="addClick">新增</a-button>
    <a-button @click="btnClick">提交</a-button>
  </div>
</template>

<script>
export default {
  name: "forInput",
  data() {
    return {
      count: 1, //计数器
      arr: [
        {
          value:1,
          customItem: "",
        },
      ],
    };
  },
  created() {},
  computed: {},
  watch: {},
  methods: {
    // 监听输入value
    input1Change(value) {
      console.log(value, "我是改变的v-model");
    },
    // 新增
    addClick() {
      this.count++;
      this.arr.push({ customItem: "", value: this.count });
    },
    // 提交
    btnClick() {
      console.log(this.arr, "提交");
    },
  },
};
</script>

<style scoped>
</style>