将默认数据传递给Vue表单组件

Question

这是一个简单的Vue 2.0表单组件。它由一个数字输入和一个按钮组成，例如：

请注意，输入值使用data与组件v-model绑定。 buttonText作为道具传递。

将默认值传递到表单的最佳方法是什么，以便它最初使用10以外的值呈现？

• 使用props似乎不是正确的方法，因为v-model不再正常工作。
• 但是，根据我从Vue文档中可以看出，data无法以道具的方式传递。

<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>

Answer 1

你可以传入一个道具（比如initialAmount），并在初始化数据函数中的amount值时引用它：

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) );
    }
  }
}