如何获取输入子值形式？ VueJS答案

【问题标题】：How to get input child value form? VueJS如何获取输入子值形式？ VueJS
【发布时间】：2021-10-15 21:12:15
【问题描述】：

我是 VueJS 的新手。我需要从表单 el 中获取子输入值。点击事件触发时我需要获取用户名和密码值并提醒它进行测试。

<form id="login-form">
    <input name="username" type="text" placeholder="Username" required><br>
    <input name="password" type="password" placeholder="Password" required><br>
    <input v-on:click="submitLogin" type="submit" value="Login">
</form>

    const loginForm = new Vue({
        el: '#login-form',
        methods: {
            submitLogin: function() {
                alert(username + password);
            }
        }
    });

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

使用 v-models 来实现这一点。看下面的代码：

new Vue({
  data: {
    // You need to define these variables inside of your data
    username: '',
    password: ''
  },
  methods: {
    submitLogin: function() {
      // Whenever you want to access variables from data, prefix them with 'this.'
      alert(this.username + this.password);
    }
  }
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <form id="login-form">
      <!-- Set v-model as an attribute on the input field -->
      <input v-model="username" name="username" type="text" placeholder="Username" required><br>
      <input v-model="password" name="password" type="password" placeholder="Password" required><br>
      <input v-on:click="submitLogin" type="submit" value="Login">
  </form>
</div>

文档：https://vuejs.org/v2/guide/forms.html

【讨论】：