Vue3中点击Add按钮后如何清空输入框内容？

我刚接触Vue3，是一名新手。点击“添加成员”按钮后，无法清空输入框内容，希望得到解决方法。

以下是我的两个组件代码：

Form.vue #

<script setup>
import { defineProps, ref, watch, onMounted } from "vue";
defineProps({
  Argonaute: { type: String, required: true },
});

defineEmits(["addMember"]);
const memberName = ref("");

watch(memberName, (newVal) => {
  localStorage.setItem("memberName", newVal);
});
onMounted(() => {
  memberName.value = localStorage.getItem("memberName" || "");
});
</script>
<template>
  <form class="new-member-form">
    <label for="addName">{{ Argonaute }}</label>
    <input
      type="text"
      id="addName"
      placeholder="Charlampos"
      v-model="memberName"
    />
    <button
      type="submit"
      class="button-add"
      @click.prevent="$emit('addMember', memberName)"
    >
      Ajouter un membre
    </button>
  </form>
</template>

Main.vue #

<script setup>
import Form from "./Form.vue";
import Member from "./Member.vue";
import { ref, onMounted, watch } from "vue";

const crewArray = ref([{ name: "", createdAt: new Date().getTime() }]);

const addMember = (memberName) => {
  if (memberName.trim() === "") {
    alert("Renseigner un Argonaute");
  } else {
    crewArray.value.push({
      name: memberName.trim(),
      createdA: new Date().getTime(),
    });
    crewArray.value.reverse();
    // 这里尝试清空但无效
    memberName = "";
  }
};

watch(
  crewArray,
  (newVal) => {
    localStorage.setItem("crewArray", JSON.stringify(newVal));
  },
  {
    deep: true,
  }
);

onMounted(() => {
  crewArray.value = JSON.parse(localStorage.getItem("crewArray")) || [];
});
</script>

<template>
  <div>
    <h2>Add an Argonaut</h2>
    <Form Argonaute="Nom de l'Argonaute" @add-member="addMember"></Form>
    <h2>Membres de l'équipage</h2>
    <ul class="member-list">
      <Member
        v-for="crewMember in crewArray"
        :key="crewMember.id"
        :member="crewMember"
      />
    </ul>
  </div>
</template>

问题原因 #

你在Main.vue的addMember函数中直接给memberName赋值为空字符串是无效的——这里的memberName是子组件传过来的普通字符串值，不是响应式的ref引用，修改它不会影响子组件Form.vue中绑定的memberName变量。

解决方案 #

方法一：子组件内处理清空逻辑（推荐）

让子组件自己管理输入框的清空，逻辑更内聚：

1. 修改Form.vue的按钮点击事件，调用自定义方法：

<!-- Form.vue 模板部分 -->
<button
  type="submit"
  class="button-add"
  @click.prevent="handleAdd"
>
  Ajouter un membre
</button>

2. 在Form.vue的<script setup>中添加handleAdd方法：

<script setup>
// ... 原有代码不变

const handleAdd = () => {
  const trimmedName = memberName.value.trim();
  if (!trimmedName) {
    alert("请输入阿尔戈英雄的名字");
    return;
  }
  $emit('addMember', trimmedName);
  // 清空输入框
  memberName.value = '';
  // 同步清空localStorage
  localStorage.removeItem('memberName');
};
</script>

方法二：父组件通知子组件清空

如果需要父组件控制清空逻辑，可通过组件引用实现：

1. 在Main.vue中给Form组件添加ref：

<!-- Main.vue 模板部分 -->
<Form ref="formRef" Argonaute="Nom de l'Argonaute" @add-member="addMember"></Form>

2. 在Main.vue的<script setup>中定义formRef，并修改addMember函数：

<script setup>
// ... 原有代码不变
const formRef = ref(null);

const addMember = (memberName) => {
  const trimmedName = memberName.trim();
  if (!trimmedName) {
    alert("请输入阿尔戈英雄的名字");
    return;
  }
  crewArray.value.push({
    name: trimmedName,
    createdAt: new Date().getTime(), // 注意原代码拼写错误：createdA → createdAt
  });
  crewArray.value.reverse();
  // 通过子组件引用清空输入框
  formRef.value.memberName.value = '';
  localStorage.removeItem('memberName');
};
</script>

3. 在Form.vue的<script setup>中暴露memberName（因为<script setup>中变量默认私有）：

<script setup>
// ... 原有代码不变
defineExpose({ memberName });
</script>

额外修正 #

原Main.vue中存在两个小问题：

• crewArray初始值可以直接设为[]，无需添加空对象
• push对象时的createdA拼写错误，应改为createdAt，避免后续数据不一致

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