ant design vue 页面不显示输入框

Question

前端框架：ant design vue @1.6.2
在a-form中想增加一个功能，有一个输入框，输入框后面是加号按钮，点击加号按钮后会再出现一个输入框，第一个输入框后面的加号变成减号，第二个输入框后面是加号，一次类推，输入框中的值会绑定checkForm.eol_defect
现在按照下面的代码，页面不显示输入框（如下图所示）

。。。。前面的省略

        <a-row v-show="checkForm.preorderPoint && checkForm.preorderPoint.includes('EOL')">
          <a-col :span="8"></a-col>
          <a-col :span="10">
            <p style="font-size: 18px;font-weight: bold;"> 前序监控EOL语言描述</p>
          </a-col>
        </a-row>

        <a-form-model-item v-show="checkForm.preorderPoint && checkForm.preorderPoint.includes('EOL')" label="EOL语言描述">

          <div v-for="(item, index) in checkForm.eol_defect" :key="index">
            <a-input v-model="checkForm.eol_defect[index]" style="width: 100%;"></a-input>
            <a-button v-if="index === checkForm.eol_defect.length - 1" @click="addInput">+</a-button>
            <a-button v-else @click="removeInput(index)">-</a-button>
          </div>

        </a-form-model-item>
。。。。后面的省略

export default {
  data() {
    return {
      checkForm: {
        eol_defect：[],
        }
    }
  }，


  methods: {
    addInput() {
      this.checkForm.eol_defect.push('');
    },
    removeInput(index) {
      this.checkForm.eol_defect.splice(index, 1);
    },
}
};
。。。。后面的省略

Answer 1

<template>
  <div>
    <!-- 根据条件显示前序监控EOL语言描述部分 -->
    <a-row v-show="checkForm.preorderPoint && checkForm.preorderPoint.includes('EOL')">
      <a-col :span="8"></a-col>
      <a-col :span="10">
        <p style="font-size: 18px;font-weight: bold;">前序监控EOL语言描述</p>
      </a-col>
    </a-row>

    <!-- 表单项包裹 -->
    <a-form-model-item
      v-show="checkForm.preorderPoint && checkForm.preorderPoint.includes('EOL')"
      label="EOL语言描述"
      prop="eol_defect"
    >
      <!-- 循环显示输入框和按钮 -->
      <div v-for="(item, index) in checkForm.eol_defect" :key="index">
        <!-- 输入框，双向绑定到checkForm.eol_defect数组 -->
        <a-input v-model="checkForm.eol_defect[index]" style="width: 100%;"></a-input>
        <!-- 如果是最后一个输入框，显示加号按钮 -->
        <a-button v-if="index === checkForm.eol_defect.length - 1" @click="addInput">+</a-button>
        <!-- 否则显示减号按钮 -->
        <a-button v-else @click="removeInput(index)">-</a-button>
      </div>
    </a-form-model-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkForm: {
        eol_defect: [], // 修复此处的拼写错误
      },
    };
  },

  methods: {
    addInput() {
      this.checkForm.eol_defect.push('');
    },
    removeInput(index) {
      this.checkForm.eol_defect.splice(index, 1);
    },
  },
};
</script>