Passing default data to Vue form component

Viewed 4491

Here is a simple Vue 2.0 form component. It consists of a number input and a button, e.g.:

enter image description here

Note that the value of the input is tied to the component's data using v-model. buttonText is passed in as a prop.

What's the best way to pass a default value into the form, so that it initially renders with a value other than 10?

  • Using props doesn't seem to be the right way to do it because then v-model no longer works properly.
  • However, data can't be passed in the way props can, as far as I can tell from 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>
1 Answers
Related