解决图片问题，为什么FormName没有被使用到

Question

<script setup>
import { ref, onMounted } from 'vue';
import { getGoodsAPI } from '@/apis/clubs';
import { findNewAPI } from '@/apis/home';
import { ElRow, ElCol, ElButton, ElDialog } from 'element-plus'; // 引入Element Plus组件
// 响应式数据
const goodsProduct = ref([]);
const dialogVisible = ref(false); // 控制详情弹窗的显示与隐藏
const currentSociety = ref(null); // 用于存储当前点击的社团详情
// 获取商品数据
const getGoods = async () => {
  try {
    const res = await getGoodsAPI();
    if (res.code === 200) {
      goodsProduct.value = res.data; // 注意这里应该是 res.data 而不是 res.result
    } else {
      // 处理错误情况
      console.error('获取商品数据失败:', res.msg);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
};
onMounted(getGoods);
// 展示详情的函数
const showDetails = (society) => {
  currentSociety.value = society; // 将当前社团的详情保存到响应式数据中
  dialogVisible.value = true; // 显示详情弹窗
};
// 定义表单模态框函数为false
const showModal = ref(false);
// 封装表单数据 
const formData = ref({
  societyId: '编程社团',
  title: '招新',
  description: '招新来啦',
  type: '类型1',
  total: 1,
  deadline: '2024-05-01 00:00:00',
  startTime: '2024-05-02 00:00:00',
  endTime: '2024-05-21 00:00:00',
});
// 重置表单
function resetForm() {
  formData.value = {
  societyId: '',
  title:'',
  description: '',
  type: '',
  total: 1,
  deadline: '',
  startTime: '',
  endTime: '',
  };
}

// 提交表单
// 提交表单
const submitForm = (formName) => {
  // 假设您使用了一个表单库（如Element Plus），这里应该有一个验证表单的方法
  // 这里只是一个示例，具体取决于您使用的表单验证方法
  const formRef = ref(null); // 注意这里使用ref创建一个响应式引用，而不是直接从$refs获取
  if (formRef.value && formRef.value.validate((valid) => {
    if (valid) {
      // 发送请求
      findNewAPI(formData.value).then((response) => {
        // 处理响应
        console.log(response);
        // 假设成功发布，关闭对话框并重置表单
        alert('不凡之人，你的表单已发送至星辰大海！');
        showModal.value = false; // 控制表单模态框的显示
        resetForm();
      }).catch((error) => {
        //  处理错误
        console.error('发送表单失败:', error);
      });
    } else {
      console.log('表单验证失败！请检查你的输入！');
      return false;
    }
  })) {
    // 这里通常不需要再次判断，因为validate方法内部已经处理了
  }
};






function closeModalIfOutside(event) {
  if (event.target.classList.contains('modal')) {
    showModal.value = false;
  }
}
</script>
<template>

  <div >
    <el-row v-for="item in goodsProduct" :key="item.societyId" class="society-item">
      <el-col :span="24">
        <h3>{{ item.societyName }}</h3>
        <p>你的角色: {{ item.role }}</p >
        <el-button v-if="item.role === '管理员'" type="primary" @click="showModal = true">发布活动</el-button>
        <el-button v-else type="text" @click="showDetails(society)"   showDetails>查看详情</el-button>
      </el-col>
    </el-row>
    <div>
    <!-- 表单模态框 -->
    <div v-if="showModal" class="modal" @click="closeModalIfOutside">
      <div class="modal-content" @click.stop>
        <span class="close" @click="showModal = false">&times;</span>
    
        <form @submit.prevent="submitForm"  :ref="formName => { formRef.value = formName; }"
      :model="formData">
      <!-- <form @submit.prevent="submitForm"  > -->
        <el-form-item label="社团ID" prop="societyId" >
        <el-input v-model="formData.societyId" placeholder="请输入社团ID"></el-input>
        </el-form-item>
        <el-form-item label="活动名" prop="title">
        <el-input v-model="formData.title" placeholder="请输入活动名"></el-input>
        </el-form-item>
        <el-form-item label="活动描述" prop="description">
        <el-input type="textarea" v-model="formData.description" placeholder="请输入活动描述"></el-input>
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
        <el-select v-model="formData.type" placeholder="请选择活动类型">
        <el-option label="类型1" value="type1"></el-option>
        <el-option label="类型2" value="type2"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="总人数" prop="total">
        <el-input-number v-model="formData.total" :min="1" placeholder="请输入总人数"></el-input-number>
        </el-form-item>
        <el-form-item label="报名截止时间" prop="deadline">
        <el-date-picker v-model="formData.deadline" type="datetime" placeholder="选择报名截止时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="活动开始时间" prop="startTime">
        <el-date-picker v-model="formData.startTime" type="datetime" placeholder="选择活动开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="活动结束时间" prop="endTime">
        <el-date-picker v-model="formData.endTime" type="datetime" placeholder="选择活动结束时间"></el-date-picker>
        </el-form-item>
        <!-- 提交和重置按钮 -->
        <!-- <el-button type="primary" @click="submitformData('formData')">提交</el-button> -->
        <el-button type="primary" @click="submitForm('formName')">提交</el-button>

        <button @click="resetForm">重置</button>
        <!-- 退出按钮 -->
        <button @click="showModal = false">退出</button>
        </form>
      </div>

    </div>


    
  </div>
    <!-- 详情弹窗 -->
    <el-dialog title="社团详情" v-model:visible="dialogVisible" width="50%" @close="dialogVisible = false">
      <div>
        <p>社团ID: {{ currentSociety.societyId }}</p >
        <p>社团成员: {{ currentSociety.members.join(', ') }}</p >
        <p>社团介绍: {{ currentSociety.introduction }}</p >
      </div>
      <template v-slot:footer>
      <span  class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
     </template>
    </el-dialog>
  </div>
</template>


<style scoped>
.society-item {
  margin-bottom: 20px; /* 流式布局中的间隔 */
}


.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(241, 232, 232, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #0b0a0a;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

</style>

Answer 1