javascript - 如何在vue js中获取输入类型中的预填充数据

Question

我在 vue js 中有一些代码。我无法从输入中获取值这是我的代码

HTML 代码:

<div  id = "app">
  <div class="form-group">
    <input type="text" class="form-control" name = "name" value = "lorem"     v-model = "name"/>
     </div>
    <button class="btn btn-primary btn-block" v-on:click="sendData()">SIGN UP</button>
</div>

Vue js 代码:

<script>
var app = new Vue({
    el: "#app",
    data() {
        errors :{}
        return {

            input: {
                name: "",

               },
             }
    },
    methods: {
            sendData() {

                alert(this.name);
           }
        }
})

谢谢

Answer 1

作为数据属性的声明，使用v-model="input.name"，然后是alert(this.input.name)。

如果您想为输入分配默认值，请像 {input:{name: 'lorem'}} 一样声明数据属性。

var app = new Vue({
  el: "#app",
  data() {
    errors: {}
    return {

      input: {
        name: "", // or pre-fill with other default value like `lorem`

      },
    }
  },
  methods: {
    sendData() {

      alert(this.input.name);
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div class="form-group">
    <input type="text" class="form-control" name="name" value="lorem" v-model="input.name" />
  </div>
  <button class="btn btn-primary btn-block" v-on:click="sendData()">SIGN UP</button>
</div>