Input löschen Vue.js?

Hallo

Ich bin gerade mit Vue js eine To-Do-App am programmieren. Es gibt ein Input feld in dem man den Namen des To-Do's schreiben kann, danach kann man noch die Kategorie wählen z.B. Arbeit oder Privat. Alles funktioniert jedoch möchte ich gerne das nach dem ich den "Add to Board"/Submit Buttom drücke der Text aus dem Input Feld gelöscht wird.

Ich bin ein Anfänger was das Programmieren angeht und würde mich über Hilfe freuen.

2 Antworten

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

07.02.2023, 14:33

Dann setze doch einfach eine leeren String in das INPUT. So in der Art:

input.value = "";

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

07.02.2023, 15:39

HTML:

<form id="todo_form" @submit.prevent="formSubmit">
  <input v-model="name" name="name" type="text" />
  <input v-model="email" name="email" type="email" />
</form>

JavaScript (Vue):

methods: {
 formSubmit: function(event) {
  this.submitted.name = this.name;
  this.submitted.email = this.email;
      
  this.name = this.email = ''; // empty string
  event.target.reset();
}

Mehr dazu:

LG medmonk

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Ähnliche Fragen

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Javascript/Vue - Enter automatisch einfügen?

Hallo,

ich habe gerade folgendes Problem: Habe input Felder und wenn ich dort was eingebe, wird dieser Wert sofort in die Variable geschrieben ohne Enter zu drücken. Nun nutze ich für das Geburtsdatum flatpickr. Dort muss ich aber erst Enter drücken, damit der Wert in der Variable steht.

Kann man wenn der Anwender 8 Zahlen eingibt und zum nächsten Input Feld springt, ohne das er Enter drückt, automatisch Enter drücken lassen, das zumindest der Wert in der Variable ist?

Hier mal ein Beispiel: https://codepen.io/anon/pen/qzYrWZ

Bei name wird die Eingabe sofort in die Variable geschrieben. Bei der Geburtstagseingabe nicht, erst wenn Enter gedrückt wurde.

Hätte es am liebsten, dass der zweite Fall genauso wie der erste Fall abläuft. Quasi bei jeder Eingabe sofort Enter aktiviert und somit den Wert in die Variable schreibt.

Und ich weiß, wenn man auf einen Tag im Kalender klickt, wird das richtig rein geschrieben. Gibt jemand es händisch ein funktioniert es nicht.

Wie muss ich das machen?

mfg werdas34

...zur Frage

Hilfe bei Vue.js Lernen?

Hallo zusammen,

Ich wollte euch fragen, ob mir jemand weiterhelfen kann.

Gerne möchte ich Vue.js lernen, jedoch weiss ich nicht, wo ich da anfangen soll. Kann mir jemand helfen, mit z. B. links zu gratis Kursen oder Videos welche einem etwas über Vue.js lernen? Falls, wenn da jemand ist, der sich sehr gut damit auskennt, möchte ich auch gerne fragen, was Vue.js überhaupt ist und wofür man dieses Framework gebrauchen kann.

Kurz zur Erklärung, ich habe den Auftrag bekommen, mit Vue.js zu arbeiten. Jedoch habe ich noch nie mit Vue.js gearbeitet und muss dies nun lernen. Ich habe bereits Kenntnisse in HTML, CSS, Bash-Scripting, PowerShell und JavaScript. Man muss auch dazu sagen, dass ich JavaScript noch nicht gut beherrsche.

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

Rechnen mit SwiftUI?

Also ich probiere gerade mich an verschiedenen Programmiersprachen aus und schaue mir gerade Swift an und würde gerne um ein Gefühl für Syntax etc. zu bekommen folgendes Programmieren:

2 Eingabefelder in welche man Zahlen eingeben kann
Wenn man das gemacht hat sollen die beiden Werte addiert werden und in einem 3. Feld ausgegeben werden.

In JS und Python hat das auch bereits geklappt aber ich würde es mal gerne in Swift versuchen.

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Python Code unsauber?


bool_again1 = True
bool_again2 = True

while bool_again1:

    bool_again2 = True

    while bool_again2:
        int_operator = int(input("Do you want to add(1), subtract(2), multiply(3) or divide(4) two numbers: "))

        if int_operator < 1 or int_operator > 4:
            print("Invalid Input")
        else:
            bool_again2 = False

    bool_again2 = True

    int_number1 = int(input("First number: "))
    int_number2 = int(input("Second number: "))

    match int_operator:
        case 1:
            print("The solution is: ", int_number1 + int_number2)
        case 2:
            print("The solution is: ", int_number1 - int_number2)
        case 3:
            print("The solution is: ", int_number1 * int_number2)
        case 4:
            print("The solution is: ", int_number1 / int_number2)

    while bool_again2:
        int_again = int(input("Do you want to use the calculator again ( Yes(1), No(2) ): "))

        if int_again == 1:
            bool_again2 = False
        elif int_again == 2:
            bool_again1 = False
            bool_again2 = False
        elif int_again != 1 or int_again != 2:
            print("Invalid Input")

Ich bin ziemlich neu bei der Programmierung und habe dieses einfache Rechenprogramm geschrieben. Allerdings möchte ich erfahrenen Programmierer fragen, wie ich diesen Code besser schreiben könnte oder ob er ok ist, da er meiner Meinung nach sehr unsauber aus sieht (durch die vielen verschiedenen "again" Variabelen, etc)

Danke

...zur Frage

HTML JS Input Feld leer?

Hallo!

Ich arbeite gerade an einem Projekt für die Schule.

Es muss eine Fehlermeldung kommen wenn ein Feld noch nicht ausgefüllt ist. Wie definiere ich das?

if (x == ??)

...zur Frage

Javascript - Note berechnen?

Schönen guten Abend,

ich versuche mir selber JS beizubringen und merke, dass es doch nicht ganz so einfach ist. Ich versuche ein Rechner zu programmieren, mit welche man die Zeugnisnote berechnen kann. Leider habe ich Probleme die Werte die ich ins Input-Feld eingebe in JS aufzurufen und zu verarbeiten. Würde mir jemand diesbezüglich helfen?

Bitte verzichtet darauf mir zu sagte wie einfach das sei und wie schlecht ich bin, ich will mich weiter motivieren mich weiterzubilden und mir nicht erzählen lassen wie einfach oder dass ich es doch lassen solle.

Mein JS

function berechnung(){
    var at = document.getElementById("allgemein")
    var kl = document.getElementById("klausur")
    document.getElementById("ergebnis").innerHTML = kl;
    allgemein+klausur
    console.log
}

Mein HTML

<div class="section">
            <p><h2>Notenrechner</h2></p>

            <input type="int" id="allgemein"> <br>
            <input type="int" id="klausur">
            <button onclick="berechnung()">Note berechnen</button>
            <p id=ergebnis></p>


        </div>

...zur Frage

PHP Formular nach Klicken des Submit Buttons nicht löschen

Hallo

Ich programmiere mit HTML und PHP einen Zeitrechner, wo man die Zahlen in ein Formular schreibt, und möchte gerne, dass nach dem Submit-Button keine Daten aus dem Formular gelöscht werden.

Beim Suchen bin ich darauf gestossen:

<tr>
    <td nowrap>1. Zeit</td>
    <td align="right">
        <input type="text" name="d1" style="text-align:right;" value="<?php echo $_POST['d1']; ?>">
    </td>
    <td align="right">
        <input type="text" name="h1" style="text-align:right;" value="<?php echo $_POST['h1']; ?>">
    </td>
    <td align="right">
        <input type="text" name="m1" style="text-align:right;" value="<?php echo $_POST['m1']; ?>">
    </td>           
    <td align="right">
        <input type="text" name="s1" style="text-align:right;" value="<?php echo $_POST['s1']; ?>">
    </td>
</tr>

Das Problem dabei ist, das dabei immer eine Fehlermeldung kommt (Bild im Anhang). Was mache ich, damit die weggeht?

Vielen Dank für eure Antworten!

Phippe

...zur Frage

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zur Frage

JavaScript Form Submit - Cannot read property 'submit' of null?

Hallo ich mal wieder mit einem JS Problem.

Ich habe einen Button, der bei Klick einen Klick auf ein verstecktes input type file simuliert. Nach auswählen der Datei, soll direkt der Upload starten ohne weiteren Button zu drücken. Dazu folgender HTML Code (Sorry der Editor ist echt schrecklich hier)

Tut mir leid - HTML stellt er gar nicht hier da -.- 
auf jeden Fall habe ich auf das versteckte Input ein

onchange="submitFiles()"

Auf dem Button habe ich ein onclick="chooseFile()"

Folgender JavaScript Code:

function chooseFile() {
   document.getElementById("fileInput").click();
}
function submitFiles(){
    document.getElementById('formbilderall').submit();
}

Leider bekomme ich immer die oben genannte Fehlermeldung:

Uncaught Type Error: Cannot read property 'submit' of null

Vielleicht weiß ja hier jemand mehr dazu :/ Danke schonmal im Voraus.

...zur Frage

Spielfigur bewegen js Spiel?

Hallo

Ich habe ein Spiel für das web entwickelt. Ich habe nur das Problem das ich nicht weiß, wie ich die Spiel Figuren, zb auf einer Linie, zu dem feld bewegen kann und von dort wieder weiter.

Das Spiel feld ist nicht auf einer Linie also die Felder sind versetzt und bestehen aud zwei Kreisen. Wenn es hilf, die Figur muss am Ende auf einer div box sein. Setze es mir JavaScript um.

Danke im voraus

...zur Frage

Komma in HTML input?

Hey,

ich programmiere zurzeit an einer Webseite bei der, der Besucher der Webseite einen Preis in das Input Feld eingeben muss welcher dann mit Js umgerechnet wird. Allerdings funktionieren nur Zahlen welche mit getrennt sind (12.50€). Da meine Webseite aber deutsch ist werden die meisten User vermutlich eine Zahl mit Komma eingeben (12,50€). Die wird aber leider nicht erkannt und als Ergebnis kommt NaN€.

Habe jetzt schon lange das Internet durchsucht aber nichts gefunden, weiß jemand von euch wie ich den Fehler beheben kann?

Danke im voraus :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen