Get Eingabewert auf Keyup Vuejs 2

Question

Ich versuche, den Eingabewert auf keyup mit Vuejs 2 zu erhalten, aber immer ein leeres Ergebnis wie die Daten zu erhalten. Bitte beachten Sie den nachfolgenden Code.

HTML:

<input type="email" @keyup="this.$data.email= $event.target.value" class="form-control" id="email" placeholder="Username (your work email)"> 
<button type="button" class="btn btn-primary btn-block inactive" @click="submit">Log in</button> 

Script:

data() { 
    return { 
    email: '', 
    } 
}, 
methods: { 
    submit() { 
    alert(this.$data.email) 
    } 
} 

Answer 1

Sie benötigen email (nicht this.$data.email) zu verweisen:

<input type="email" @keyup="email = $event.target.value" class="form-control" id="email" placeholder="Username (your work email)"> 

---

Aber auch, warum nichtverwendenum email an den Eingang zu binden?

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     email: '', 
 
    } 
 
    }, 
 
    methods: { 
 
    submit() { 
 
     alert(this.email) 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="email" v-model="email" class="form-control" id="email" placeholder="Username (your work email)"> 
 
    <button type="button" class="btn btn-primary btn-block inactive" @click="submit">Log in</button> 
 
</div>

Answer 2

Als Alternative zu dem, was beantwortet @thanksd.

<input type="email" v-model="email" class="form-control" id="email" placeholder="Username (your work email)"> 

Methode:

submit() { 
    alert(this.email) 
}