v-model抱怨道具和数据

Question

第一次修改Vue时，我得到了一个相当无害的输入，如下所示：

<input type="number" name="quantity" v-model="quantity" />

它存在于一个组件中。

在prop对象上设置数量时，我得到以下错误(当更改输入中的值时)：

Vue.component('my-product', {props: {quantity : {default: 1}}});

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "quantity"

但是，当按照Vue tutorial documentation上的演示在data对象上设置数量时，我得到以下错误：

Vue.component('my-product', {data: {quantity : 1}});

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

我不知所措。此字段与父视图无关(vues?)因此，也许我只是误解了如何设置它。

Answer 1

哦，它就在错误文本中...

Vue.component('my-product', {
  data: function(){ 
      return {quantity : 1}
  }
});