how to get pre filled data in input type in vue js

Question

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

Sphinx · Accepted Answer · 2018-08-08 18:59:41Z

3

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.com/[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>

edited Aug 8, 2018 at 18:59

answered Aug 8, 2018 at 18:18

Sphinx

10.7k2 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sahed moral Over a year ago

is it works? i think this is the proper way. laracasts.com/discuss/channels/vue/…

user9805590 · Accepted Answer · 2018-08-08 18:45:05Z

2

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>

answered Aug 8, 2018 at 18:45

user9805590

Collectives™ on Stack Overflow

how to get pre filled data in input type in vue js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related