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", then alert(this.input.name)。

如果您想为输入分配默认值，请将 data 属性标记为{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>

Answer 2

仅使用 v-model，没有 value 属性：

<div  id = "app">
  <div class="form-group">
    <input
      type="text"
      class="form-control"
      name="name"
      v-model="name"
    />
  </div>
  <button
    class="btn btn-primary btn-block"
    @click="sendData"
  >
    SIGN UP
  </button>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data () {
      return {
        name: 'lorem'
      }
    },
    methods: {
      sendData () {
        alert(this.name)
      }
    }
  })
</script>