Looking at this Vue 2.0 form component, you will find a number input and a button:
https://i.sstatic.net/SaruX.png
It's worth noting that the input value is connected to the data of the component through v-model, while the buttonText is passed as a prop.
Wondering how to set a default value for the form, so it doesn't start with 10?
- Using
propsmay not work well as it can interfere withv-model. - On the other hand,
dataseems unable to be passed similar to props according to Vue documentation.
.
<template>
<form v-on:submit.prevent="onSubmit">
<input v-model="amount" type="number" min="1" max="20"></input>
<button type="submit">{{ buttonText }}</button>
</form>
</template>
<script>
export default {
props: [ 'buttonText' ],
data: function() {
return {
amount: 10
}
},
methods: {
onSubmit: function() {
this.$emit("submit", parseInt(this.amount) );
}
}
}
</script>