samedi 8 mai 2021

Vuejs - Best way of avoiding mutating of props when three components are interlinked

I know mutating the props isn't a good idea, i want to know best way of using the props in my case. I referred few examples but, did not get the exact way. This question has been raised many of a times, but i think its worth asking.

ParentComponent.vue

 <first-component :actualValue="apiData.services"></first-component>

FirstComponent.vue

    <second-component :label="Service 1" :valueRend="actualValue.service1"></second-component>
        ...
    <second-component :label="Service 2" :valueRend="actualValue.service2"></second-component>
        ...
     props:{
        actualValue:{type:Object},
     }

SecondComponent.vue

    <label class="label">
        <input
          type="checkbox"
          v-model="valueRend"
          @change="onChange"
        />
        
     </label>

      ...

      props:{
        valueRend:{type:Object},
        label:{type:String}
      }
      methods:{
        onChange(){
          this.$emit('update-change', this.valueRend)
        }
      }

So from the code you can observe that i am actually mutating the props, please let me know effective way of avoiding the mutation of props in my example.




Aucun commentaire:

Enregistrer un commentaire