最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to get pre filled data in input type in vue js - Stack Overflow

programmeradmin3浏览0评论

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

Share Improve this question edited Aug 8, 2018 at 18:15 Sphinx 10.7k2 gold badges35 silver badges50 bronze badges asked Aug 8, 2018 at 17:54 ShaddyShaddy 491 gold badge2 silver badges8 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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./[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>
发布评论

评论列表(0)

  1. 暂无评论