Vue3 Script Setup中点击按钮时输入为空显示错误文本的问题

问题根源 #

• 按钮点击事件未正确更新clicked状态：当前@click="clicked"仅绑定变量，未执行赋值操作，导致clicked始终为false
• 错误提示的条件渲染逻辑混乱：使用了未定义的showMore变量，三元表达式逻辑错误，导致页面加载时错误文本意外显示
• 提交后未重置状态：清空输入框后未重置clicked，易引发后续交互异常

修复步骤 #

1. 修正按钮点击事件 #

将按钮的点击事件改为赋值操作，确保点击时clicked设为true：

<button
  @click="clicked = true"
  type="submit"
  value="submit"
  class="button-add button-add__element button-add__element--modifier"
>
  Ajouter un membre
</button>

2. 简化错误提示的条件渲染 #

删除复杂的三元表达式和未定义变量，直接通过v-if控制：仅当点击过按钮且输入框为空时显示错误文本，移除多余的:style绑定：

<div v-if="clicked && memberName.trim() === ''">
  <p class="error error__element error__element--modifier">
    Désolé, vous devez remplir le formulaire du nom!
  </p>
</div>

3. 提交后重置状态 #

在addMember方法中，先验证输入有效性，提交成功后重置clicked为false，避免清空输入框后错误文本仍显示：

<script setup>
import { ref, defineEmits } from "vue";

let memberName = ref("");
let clicked = ref(false);

const emits = defineEmits(["addMember"]);

const addMember = () => {
  // 先验证输入
  const trimmedName = memberName.value.trim();
  if (trimmedName === '') {
    clicked.value = true;
    return;
  }
  // 输入有效时提交并重置状态
  emits("addMember", trimmedName);
  memberName.value = "";
  clicked.value = false;
};
</script>

4. 优化父组件验证逻辑（可选） #

移除父组件中的alert，统一由子组件显示错误提示，保持交互一致性，同时修正重复成员判断逻辑：

<script setup>
let crewArray = ref([{},]);
const addMember = (memberNameValues) => {
  const trimmedName = memberNameValues.trim();
  if (trimmedName === "") return;

  // 检查成员是否已存在
  const isDuplicate = crewArray.value.some(item => item.name === trimmedName);
  if (isDuplicate) {
    alert("Cet Argonaute est déjà dans l'équipage!");
  } else {
    crewArray.value.push({
      id: randomIdGenerator(),
      name: trimmedName,
      createdAt: createdDate,
    });
    crewArray.value.reverse();
  }
};
</script>

最终效果 #

• 页面加载时错误文本默认隐藏
• 点击按钮时，空输入显示错误提示，输入有内容则提交并清空输入框，错误提示自动隐藏
• 若需要输入时自动隐藏错误提示，可添加watch监听memberName，当内容变化且clicked为true时重置clicked

内容的提问来源于stack exchange，提问作者David darkheadbanger