How to clear string inside input after user click "add" button in vue 3?

Question

I just started Vue 3 and i'm a beginner. I have one question, how to clear input after the "add a member" button clicked ? I don't understand. This is my github if you want to check directly: https://github.com/Darkheadbanger/WildCodeSchool_with_vue I have two separates files, these are my files:

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

And this is my Main.vue, as you can see, inside the function "addMember", i created a condition, if the input is string i show an alert, if not the push to array and clear the input. But sadly, the input is stilled filled with the string after the button is clicked. So how to clear the input from the string please ?

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>

Thanks

Just clear the value of the ref you use for v-model: memberName.value = ''. — Gabe
– Gabe, Commented Aug 26, 2022 at 17:22
the memberName you are setting blank in Main.vue is just the local variable scoped to that one function, of course it won't affect the value in a different component. Mina's answer is correct, alternatively you can look into how props work in Vue so you can create memberName in Main and send it down to Form as a prop. That will let you modify it in Main and the prop in Form will be reactive to those changes. — yoduh
– yoduh, Commented Aug 26, 2022 at 18:02

Mina · Accepted Answer · 2022-08-26 15:02:59Z

Just add a function inside Form.vue component, let's call it addMember and after emit the event reset the memberName value with an empty string.

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

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

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>

Collectives™ on Stack Overflow

How to clear string inside input after user click "add" button in vue 3?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related