Die Weitergabe der Daten von der Eingabe bis zur vue - Funktion

Ich möchte Daten aus einer Eingabe:

<input
  id="txtName" 
  type="text"
  v-on:keyup.enter="addMessage(/* THIS FIELD VALUE */)"
/>

einer Methode:

methods: {
  addMessage(name) {
    //stuff
  }
}

Versuchte ich mit this oder this.value als parameter, aber es funktioniert nicht.

Wie soll ich dieses Problem lösen?

InformationsquelleAutor Grzegorz G. | 2017-08-23

parameter-passing vue.js

Lösung 1: die Verwendung von v-Modell(Bevorzugt)

HTML

<input id="txtName" @keyup.enter="addMessage" v-model="txtInput" type="text">

VueJS

data: {
    txtInput: ''
},
methods: {
    addMessage(){
      console.log(this.txtInput)
    }
}

Lösung 2: Mit Hilfe von jQuery

HTML

<input id="txtName" @keyup.enter="addMessage('txtName')" type="text">

import jQuery mit import $ from jquery(webpack2 Beispiel)

VueJS

methods: {
    addMessage(id){
      console.log($('#txtName').val())
    }
}

Die Lösung 1 ist die beste für mich

InformationsquelleAutor Shubham Patel

10

Konnte man entweder v-model zu binden, eine data-Eigenschaft, um die Eingabe, und verweisen Sie einfach, dass Sie in Ihrer Methode (sehen Sie diese Geige):
```
<input v-model="message" @keyup.enter="addMessage()"/>
```
```
methods: {
  addMessage() {
    this.messages.push(this.message);
  }
}
```
Oder Sie können die speziellen inline - $event Immobilie, die Sie eine Referenz auf das Ziel-element mit dem Wert (sehen Sie diese Geige):
```
<input @keyup.enter="addMessage($event)"/>
```
```
methods: {
  addMessage(e) {
    this.messages.push(e.target.value);
  }
}
```
InformationsquelleAutor thanksd

Hier ist dein Beispiel korrigiert, um zu arbeiten. Nur ein paar syntax-Fehler, plus die praktische Tatsache, dass, wenn Sie nicht angeben, welche Argumente in der onkeyup, Sie bekommen das Ereignis, das ist, was Sie wollen.

markup

<div id='ctr'>
  {{message}}
  <input  id="txtName" v-on:keyup.enter="addMessage" type="text">
</div>

js

var vm = new Vue({
  el : '#ctr',
  data : {message: 'hello cobber'},
  methods: {
    addMessage: function(event){
      debugger;
      alert(event.target.value)
      //stuff
    }
  }
});

InformationsquelleAutor bbsimonbb

Hoffe, dieses Beispiel wird Euch helfen -

<div class="form-register" :class="{ 'active': active == 'register' }" id="form-register">
        <div class="error-message" v-text="registerError"></div>
        <input type="text" name="name" placeholder="Name" v-model="registerName" @keyup.enter="submit('register', $event)" required>
        <input type="email" name="email" placeholder="Email" v-model="registerEmail" @keyup.enter="submit('register', $event)" required>
        <input type="password" name="password" placeholder="Password" v-model="registerPassword" @keyup.enter="submit('register', $event)" required>
        <input type="submit" :class="{ 'disabled': submitted == 'register' }" @click="submit('register', $event)" v-model="registerSubmit" id="registerSubmit">
        <div class="links"> <a href="" @click="flip('login', $event)">Already have an account?</a>

        </div>
      </div>

und in app.js

abrufen von Daten wie diese -

var modal_submit_register = 'Register';
var server = window.location.hostname;
var host = "http://"+server+"/";
//alert(host);

var modal = new Vue({
  el: '#login-modal',
  data: {
    active: null,
    submitted: null,

    //Submit button text
    registerSubmit: modal_submit_register,

    //Modal text fields
    registerName: '',
    registerEmail: '',
    registerPassword: '',
    loginUser: '',
    loginPassword: '',
    passwordEmail: '',

    //Modal error messages
    registerError: '',
    loginError: '',
    passwordError: '',
  },
  methods: {
    close: function(e) {
      e.preventDefault();
      if (e.target === this.$el) {
        this.active = null;
      }
    },
    flip: function(which, e) {
      e.preventDefault();
      if (which !== this.active) {
        this.active = which;
      }
    },
    submit: function(which, e) {
      e.preventDefault();
      this.submitted = which
      var data = {
        form: which
      };

      switch (which) {

        case 'register':
          data.name = this.registerName;
          data.email = this.registerEmail;
          data.password = this.registerPassword;
          console.log(data);
          this.$set('registerSubmit', 'Registering...');

          $.ajax({
              url: 'register.php',
              method: 'POST',
              data: data,
              success: function(data){
                 console.log(data);
              },
              error: function(){
                  console.log('We did not succeed!');
              }
          });
        break;



      }

    }
  }
});

InformationsquelleAutor Suniti Yadav

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.