Passing default data to Vue form component

Question

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

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>

@SureshVelusamy No, you can't. Vue throws a warning that you shouldn't be editing props because they will be overwritten if the parent component is re-rendered. — Andrew Mao
– Andrew Mao, Commented Sep 12, 2017 at 12:44

thanksd · Accepted Answer · 2017-09-12 12:56:00Z

4

You can pass in a prop (say initialAmount) and reference that when initializing the amount value in the data function:

export default {
  props: {
    buttonText: { type: String },
    initialAmount: { type: Number, default: 10 },
  },
  data: function() {
    return {
      amount: this.initialAmount
    }
  },
  methods: {
    onSubmit: function() {
      this.$emit("submit", parseInt(this.amount) );
    }
  }
}

edited Sep 12, 2017 at 12:56

answered Sep 12, 2017 at 12:25

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

Collectives™ on Stack Overflow

Passing default data to Vue form component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related