prop値が定義されていない場合、値を設定すると警告が発生します

Question

フォームに入力するための初期データモデルがあります。私は小道具を介してデータを取得するさまざまなサブコンポーネントを持っています。しかし、私が小道具を使用して未定義を渡すと、VueJSなしで値を設定できず、警告が表示されます。しかし時々、私のデータは定義されておらず、それは大丈夫です。形式は（.sync修飾子を使って）未定義にするためのものです。この警告を回避するにはどうすればよいですか？

例

初期データモデル：

{ 
    color: undefined 
} 

アプリケーションテンプレート：

<div> 
    <color-picker v-bind:color.sync="color"></color-picker> 
</div> 

サブコンポーネントテンプレート：

<div> 
    <button v-on:click="setRed"></button> 
</div> 

サブコンポーネントコントローラ/ Defintion /どのような：小道具に渡されたデータは、小道具のデフォルトを定義されていないにもかかわらず

Vue.component('color-picker', { 
    props: { 
     color: { 
      default: function() { return 'blue'; } 
     } 
    }, 
    methods: { 
     setRed: function() { 
      this.$set(this, 'color', 'red'); 
     } 
    } 
}) 

がトリガされません。 this.colorの値は undefinedのままです。

しかし、ボタンをクリックして色を設定すると、VueJSから反応性プロパティを追加しないという警告が表示され、データを前もって宣言します。

Answer 1

あなたの小道具を更新するにはthis.$emit('update:color', 'red')を使用してください：Working example。

documentation about the .sync modifierもご覧ください。