i have chuck of code in vue js.. I am not able to get value from input here is my code

HTML Codes:

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

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

            input: {
                name: "",

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

                alert(this.name);
           }
        }
})

Thanks

i have chuck of code in vue js.. I am not able to get value from input here is my code

HTML Codes:

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

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

            input: {
                name: "",

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

                alert(this.name);
           }
        }
})

Thanks

• javascript
• input
• vue.js
• v-model

2 Answers 2

As the declare for the data properties, uses v-model="input.name", then alert(this.input.name).

If you'd like to assign default value for the input, decalre the data property like {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./[email protected]/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>

Use v-model only, without value attribute:

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