CODEWITHSUNDEEP
htmlvue.jsvuejs2
Monwara Hossain Munni
Monwara Hossain Munni

Reputation: 103

How to update a prop on change of another prop value?

I have two props: 

props:['bank_lists','branch_list'])

On change of bank, I want to change 'branch_list'.

HTML:

        <div class="form-group m-form__group row">
          <label for="accounts_bank_id" class="col-lg-3 col-form-label">Bank <span class="requiredField">*</span></label>
          <div class="col-lg-6">
            <select class="form-control select2" id="accounts_bank_id"  v-model="form.accounts_bank_id" data-selectField="accounts_bank_id" @change="loadBranch()">
              <option v-for="(value,index) in bank_lists" :value="value.id"> {{value.accounts_bank_names}}</option>
            </select> 
          </div>
        <div class="form-group m-form__group row">
          <label class="col-lg-3 col-form-label" for="accounts_branch_id">Bank Branch </label>
          <div class="col-lg-6">
            <select class="form-control select2" id="accounts_branch_id"  v-model="form.accounts_branch_id" data-selectField="accounts_branch_id">
              <option v-for="(bvalue,bindex) in branch_list" :value="bvalue.id"> {{bvalue.bank_branch_names}}</option>
            </select>
          </div>

JS:

        loadBranch(){
          var _this = this;
          var id= this.form.accounts_bank_id;
          axios.get(base_url+"bank-account/"+id+"/branch-list").then((response) => {
            console.log(_this.branch_list);
            if(response.data!=''){
              _this.branch_list = response.data;
            }
            else{
              _this.branch_list = '';
            }
          });
        },

If I change the prop branch_list directly, it gives the following warning:

warning: bank-account.js:2056 [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: "branch_list"

How can I remove the error using computed/data method?

Upvotes: 0

Views: 312

Answers (1)

TommyF
TommyF

Reputation: 7160

It depends.
Passing a value as a property to a child component means that the "owner" of that data is the parent and it should be the only one mutating that data (this is why you get the [Vue warn]).

If your loadBranch() method is located in the child component, then passing branch_list down as a prop might be the wrong thing to do and data ownership of branch_list should possibly be in the child component itself (i.e. not a prop but a data object).
If branch_list is required elsewhere, possibly your loadBranch() code should be in the parent as well. In this case simply $emit an event when your bank_list selection changes, listen for this event in the parent and then update your branch_list in the parent as well. The new value will then be automatically propagated to the child since it is bound as a prop.

In short: keep data ownership as far down the component tree as possible, if changes even further down the tree should have any influence on your data, emit events from the child components, listen for them in the data owner component and then update your data there and have it propagate down again.

// in child:
<select ... @change="$emit('selection-changed', $event)">

// in parent:
<ChildComponent ... @selection-changed="loadData($event)">
...
loadData(e) {
    this.myData = getNewDataForValue(e.target.value)
}

Upvotes: 1

Related Questions