用戶單擊vue 3中的“添加”按鈕后如何清除輸入中的字符串？

Question

我剛開始使用 Vue 3，我是初學者。 我有一個問題，單擊“添加成員”按鈕后如何清除輸入？ 我不明白。 這是我的 github 如果你想直接檢查： https://github.com/Darkheadbanger/WildCodeSchool_with_vue我有兩個單獨的文件，這些是我的文件：

這是 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，如您所見，在 function“addMember”中，我創建了一個條件，如果輸入是字符串，我會顯示警報，如果不是推送到數組並清除輸入。 但遺憾的是，單擊按鈕后，輸入仍然充滿了字符串。 那么如何清除字符串中的輸入呢？

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();
    // To ask because does not work, I want the input string to reset to empty once the add button is clicked
    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 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>

謝謝

Answer 1

只需在Form.vue組件中添加一個 function ，我們稱之為addMember並在emit事件后將memberName值重置為空字符串。

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

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

watch(memberName, (newVal) => {
  localStorage.setItem("memberName", newVal);
});
onMounted(() => {
  memberName.value = localStorage.getItem("memberName" || "");
});

const addMember = () => {
  emit('addMember', memberName.value)
  memberName.value = '';
}
</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="addMember"
    >
      Ajouter un membre
    </button>
  </form>
</template>

主.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();
  }
};

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 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>