web-dev-qa-db-fra.com

Passer des données d'une entrée à la fonction de vue

Je veux transmettre des données d'une entrée:

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

à une méthode: 

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

J'ai essayé d'utiliser this ou this.value en tant que paramètre, mais cela ne fonctionne pas. 

Comment devrais-je résoudre ce problème?

vue.jsparameter-passing
4
Grzegorz G.

Solution 1: Utilisation du modèle v (préféré)

HTML

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

VueJS

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

Solution 2: Utiliser jQuery

HTML

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

importer jQuery en utilisant import $ from jquery (exemple avec webpack2)

VueJS

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

Vous pouvez soit utiliser v-model pour lier une propriété de données à l'entrée, et simplement référencer cela dans votre méthode ( see this fiddle ):

<input v-model="message" @keyup.enter="addMessage()"/>

methods: {
  addMessage() {
    this.messages.Push(this.message);
  }
}

Vous pouvez également utiliser la propriété spéciale inline $event, qui vous donne une référence à la valeur de l'élément cible ( voir ce violon ):

<input @keyup.enter="addMessage($event)"/>

methods: {
  addMessage(e) {
    this.messages.Push(e.target.value);
  }
}
9
thanksd

Ici votre exemple est corrigé pour fonctionner. Juste quelques erreurs de syntaxe, plus le fait pratique que si vous ne spécifiez pas d'arguments dans onkeyup, vous obtenez l'événement, ce que vous voulez.

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
    }
  }
});
1
bbsimonbb

J'espère que cet exemple vous aidera -

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

et dans app.js

récupérer des données comme celle-ci -

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;



      }

    }
  }
});
0
Suniti Yadav