web-dev-qa-db-ja.com

Vueコンポーネントのメソッドから小道具の値を変更することは可能ですか？

コンポーネントがあり、値543をprops：prop-room-selectedに渡しています。

<navigation-form :prop-room-selected='543'>
</navigation-form>

今、ボタンをクリックしてから、私は関数updateCoachStatusを呼び出してpropRoomSelectedの値を変更していますが、props値は更新されていません。

{
    template: '#navigation-form',
    props: ['propRoomSelected'],
    data: function () {
      return {
        roomSelected: this.propRoomSelected,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.propRoomSelected = 67;
      }
  }
}

機能から小道具の値を変更する方法を知りません。 Vueではpropsの値を更新できますか??

laravellaravel-5.3vuejs2vue-component
11
Rubanraj Ravichandran

あなたがしていることはVue（コンソールで）で警告を投げます。

[Vue warn]：親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロップを直接変更しないでください。代わりに、小道具の値に基づいてデータまたは計算されたプロパティを使用します。変化するプロップ： "propRoomSelected"

値は、実際にはコンポーネントを変更しますinsideコンポーネントは、変更しませんoutsideコンポーネント。親プロパティの値はコンポーネント内で変更することはできません。実際、更新された値は、親が再レンダリングした場合、lostになります。理由。

親プロパティを更新するには、$emit更新された値を使用して、親の変更をリッスンする必要があります。

Vue.component("navigation-form",{
    template: '#navigation-form',
    props: ['propRoomSelected'],
    data: function () {
      return {
        roomSelected: this.propRoomSelected,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.$emit("update-room-selected", 67) ;
      }
  }
})

そして親テンプレートでイベントをリッスンします

<navigation-form :prop-room-selected='propRoomSelected'
                 @update-room-selected="onUpdatePropRoomSelected">
</navigation-form>

例 です。

これは一般的なパターンであり、Vue= v-modelと呼ばれる少し簡単にするためのディレクティブを実装しました。これは同じことをするv-modelをサポートするコンポーネントです。

Vue.component("navigation-form-two",{
    template: '#navigation-form-two',
    props: ['value'],
    data: function () {
      return {
        roomSelected: this.value,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.$emit("input", 67) ;
      }
  }
})

そして親テンプレートで

<navigation-form-two v-model="secondRoomSelected">

基本的に、コンポーネントがv-modelをサポートするには、valueプロパティと$emitinputイベントを受け入れる必要があります。上にリンクされている例は、それが機能していることも示しています。

15
Bert