Question

我想从输入中传递数据：

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

方法：

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

我尝试使用this或this.value作为参数，但它无效。

我该如何解决这个问题？

Answer 1

您可以使用Multitable将数据属性绑定到输入，只需在方法中引用它（see this fiddle）：

v-model

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

或者，您可以使用特殊的内联methods: { addMessage() { this.messages.push(this.message); } }属性，该属性为您提供对目标元素值（see this fiddle）的引用：

$event

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

Answer 2

解决方案1：使用v-model（首选）

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

使用import $ from jquery导入jQuery（webpack2示例）

VueJS

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

Answer 3

Here 是您更正工作的示例。只是一些语法错误，加上一个方便的事实，如果你没有在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
    }
  }
});

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



      }

    }
  }
});

Answer 5

今年的更新和更优雅的方式：

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

在方法中：

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

这将记录输入值。

Answer 6

最简单的解决方案是：

HTML：

<input type="text" v-model="inputMessage" />

我不知道你为什么要在 keyup 事件上使用它，但如果你想这样做，请将 v-model 更改为 @keyup，keyup 是 v-on:keyup 和长时间的简短解决方案最好这样使用它。

app.js：

const app = Vue.createApp({
    data() {
    return {
        inputMessage: '',
    };
    },
    methods: {
    AddMessage() {
        this.inputMessage /*do something with it*/
    },
    },
});

将数据从输入传递到vue的功能

6 个答案:

标记

JS