Передача данных с входа в функцию vue

Я хочу передать данные с ввода:

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

к способу:

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

Я попытался использовать this или this.value в качестве параметра, но он не работает.

Как мне это решить?

Ответ 1

Решение 1: Использование v-модели (предпочтительно)

HTML

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

VueJS

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

Решение 2. Использование jQuery

HTML

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

импортировать jQuery с помощью import $ from jquery (пример webpack2)

VueJS

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

Ответ 2

Вы можете использовать v-model, чтобы связать свойство данных со входом, и просто сослаться на это в своем методе (см. Эту скрипку):

<input v-model="message" @keyup.enter="addMessage()"/>
methods: {
  addMessage() {
    this.messages.push(this.message);
  }
}

Или вы можете использовать специальное встроенное свойство $event, которое дает вам ссылку на значение целевого элемента (см. эту скрипку):

<input @keyup.enter="addMessage($event)"/>
methods: {
  addMessage(e) {
    this.messages.push(e.target.value);
  }
}

Ответ 3

Вот ваш пример, исправленный для работы. Просто пара синтаксических ошибок, плюс удобный факт, что если вы не укажете аргументы в onkeyup, вы получите событие, которое вы хотите.

наценка

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

Ответ 4

Надеюсь, этот пример поможет вам -

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

и в app.js

получение данных, подобных этому,

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;



      }

    }
  }
});

Ответ 5

Обновление на этот год и более элегантный способ:

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

в методе:

methods: {
  addMessage({target}) {
    console.log(target.value);
  }
}

Это будет записывать входное значение.