ZBLOG

看起来你正在编写一个 Vue.js 组件的代码,但它有一些语法错误和结构问题。让我帮你整理一下这个代码,并确保它在 Vue.js 中正确运行。以下是修正后的示例:

<template>
  <div>
    <div v-if="isCustomerNotFound">
      <a-row v-for="(item, index) in productRows" :key="index">
        <a-col :span="12" v-if="isCustomerNotFound">
          <a-form-item label="产品名称" style="width: 250%; margin-left: -130px">
            <a-input placeholder="请输入产品名称" v-model:value="item.productName" />
          </a-form-item>
        </a-col>

        <a-col :span="12" v-if="isCustomerNotFound">
          <a-form-item label="借据号" style="width: 250%; margin-left: -130px">
            <a-select placeholder="请输入借据号" mode='tags' v-model:value="item.loanInfoCode"/>
          </a-form-item>
        </a-col>

        <a-col :span="24" style="margin-top: -25px">
          <a-button @click="addProductRow()" v-if="index === productRows.length - 1" class="jia">
            <PlusCircleOutlined />
          </a-button>
          <a-button @click="removeProductRow(index)" v-if="productRows.length > 1" class="jian">
            <MinusCircleOutlined />
          </a-button>
        </a-col>
      </a-row>

      <!-- Submit button -->
      <a-button type='primary' @click='handleSubmit'>提交</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';

const isCustomerNotFound = ref(true);
const productRows = ref([{ productName: '', loanInfoCode: [] }]);
const hasValidationError = ref(false);
const formRef = ref(null); // Assume you have a form reference
const modalType = ref('add'); // or 'edit'
const isModalVisible = ref(false);

const addProductRow = () => {
  productRows.value.push({ productName: '', loanInfoCode: [] });
};

const removeProductRow = (index) => {
  productRows.value.splice(index, 1);
};

const handleSubmit = async (values) => {
  hasValidationError.value = false;

  try {
    await formRef.value.validate(); // Validate the form

    if (isCustomerNotFound.value) {
      for (let product of productRows.value) {
        // 确保productName存在
        if (!product.productName) {
          message.error('请将产品名称填写完整!');
          hasValidationError.value = true;
          return;
        }
        
        if (!product.loanInfoCode || product.loanInfoCode.length === 0) {
          message.error('请填写借据号!');
          hasValidationError.value = true;
          return;
        }
      }

      const values = { ...formModal }; // Make sure to define `formModal`

      if (modalType.value === 'add') {
        addCustomer(values);
      } else if (modalType.value === 'edit') {
        editCustomer(values);
      }

      setTimeout(() => {
        QueryTab();
      }, 200);

      isModalVisible.value = false;
    }
    
  } catch (error) {
    console.error(error);
    message.error('表单验证失败!');
    hasValidationError.value = true;
  }
};
</script>

<style scoped>
.jia, .jian {
  /* Your styles here */
}
</style>

修正点:

  1. HTML标签:确保所有标签都正确关闭,特别是 <div>, <row>, <col> 和其他元素。
  2. Vue指令:确保使用 v-modelv-forv-if 时没有拼写错误。
  3. 函数调用:为按钮点击事件添加括号以调用相应的方法。
  4. async/await处理:在 handleSubmit 函数中使用 async/await 来处理异步操作。

如果还有其他具体问题或需要进一步修改的地方,请告诉我!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22884

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?