发出不可能事件后清除 Vue 输入字段

Question

我是 Vue 3 的初学者，我有一个问题，我想在发出事件后简单地清除 Vue 输入字段，但我不知道为什么它不起作用。有人请帮助我，我已经被困了三个小时了。这是我的 github。

这是我的 form.vue :

    <script setup>
import { defineProps } from "vue";
defineProps({
  Argonaute: { type: String, required: true },
  // addMember: { type: Function, required: true },
});
defineEmits(["addMember"]);
const memberName = "";
</script>
<template>
  <!-- v-on et @ le même -->
  <form class="new-member-form">
    <label for="addName">{{ Argonaute }}</label>
    <!-- J'aimerais que cela se connecte et quand on clique le bouton ajouter, va ajouter l'input que l'utilisateur mis dans le tableau addCrew -->
    <input
      type="text"
      id="addName"
      placeholder="Charlampos"
      v-model="memberName"
    />
    <button type="submit" @click.prevent="$emit('addMember', memberName)">
      Add Member
    </button>
  </form>
</template>

<style scoped lang="scss">
.new-member-form {
  margin: 2em 0 4em 0;
  text-align: center;
  label {
    display: block;
    margin-bottom: 0.5em;
  }
}
#button-add {
  background-color: #f76c6c;
  padding: 0 16px;
  line-height: 30px;
  border-radius: 10px;
  box-shadow: black 4px 4px 0 0;
  color: black;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
  &:active {
    box-shadow: black 2px 2px 0 0;
    transform: translate(2px, 2px);
  }
}
</style>

这是我的 main.vue

    <script setup>
import Form from "./Form.vue";
import Member from "./Member.vue";
import { onMounted } from "vue";
// Je dois passer label dans le component enfant form dans le v-model: "label"
const crewArray = [
  { id: 1, name: "Eleftheria" },
  { id: 2, name: "Davidthos" },
];

const addMember = (memberName) => {
  console.log("memberName", memberName);
  if (memberName.trim() === "") {
    return alert("Renseigner un Argonaute");
  } else {
    console.log("memnerName", memberName);
    // Si l'id courant est plus grand que l'id précedent on retourne l'id courant (ex: 2 > 1 returne 2)
    let maxArray = crewArray.reduce((prev, current) => {
      if (current.id > prev.id) {
        return current;
      } else {
        return prev;
      }
    });
    let newId = maxArray.id + 1;
    // Ajouter le nouveau crew membre dans le tableau cewArray
    crewArray.push({
      id: newId,
      name: memberName.trim(),
    });

    localStorage.setItem("crew-member", JSON.stringify(crewArray));
  }
};
onMounted(() => {
  if (localStorage.getItem("crew-member") !== null) {
    let pushCrew = crewArray.unshift(localStorage.getItem("crew-member"));
    console.log(pushCrew);
  } else {
    localStorage.setItem("crew-member", JSON.stringify(crewArray));
  }
});
</script>

<template>
  <div>
    <h2>Add an Argonaut</h2>
    <!-- form 2 ici -->
    <Form Argonaute="Nom de l'Argonaute" @add-member="addMember"></Form>

    <!-- Member list -->
    <h2>Membres de l'équipage</h2>
    <ul class="member-list">
      <Member
        v-for="crewMember in crewArray"
        :key="crewMember.id"
        :member="crewMember"
      />
    </ul>
  </div>
</template>

<style scoped lang="scss">
.member-list {
  color: red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  .member-item {
    margin: 2em 0 2em 0;
    position: relative;
    line-height: 3em;
    border-radius: 10px;
    color: white;
    box-shadow: #26394d 0px 20px 30px -10px;
    background-color: #f76c6c;
    text-align: center;
    padding: 0em 7em;
  }
}
</style>

这是我的 member.vue

    <script setup>
defineProps({
  member: { type: Object, required: true },
});
</script>
<template>
  <!-- <div class="member-item">Eleftheria</div> -->
  <li class="member-item">{{ member.id }}) {{ member.name }}</li>
</template>

<style scoped lang="scss">
.member-list {
  color: red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  .member-item {
    margin: 2em 0 2em 0;
    position: relative;
    line-height: 3em;
    border-radius: 10px;
    color: white;
    box-shadow: #26394d 0px 20px 30px -10px;
    background-color: #f76c6c;
    text-align: center;
    padding: 0em 7em;
  }
}
</style>