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 badges2 Answers
Reset to default 3As 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>