时间戳

首页 > 解决方案 > 如何在更改另一个道具值时更新道具？

html - 如何在更改另一个道具值时更新道具？

问题描述

我有两个道具：

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

在更改银行时，我想更改“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 = '';
            }
          });
        },

如果我直接更改道具branch_list，它会给出以下警告：

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"

如何使用计算/数据方法消除错误？

标签： htmlvue.jsvuejs2

解决方案

这取决于。
将值作为属性传递给子组件意味着该数据的“所有者”是父组件，并且它应该是唯一改变该数据的人（这就是您获得[Vue warn].

如果您的loadBranch()方法位于子组件中，那么branch_list作为道具向下传递可能是错误的做法，并且数据所有权branch_list可能应该在子组件本身中（即不是道具而是数据对象）。
如果branch_list在其他地方需要，可能您的loadBranch()代码也应该在父级中。在这种情况下，只是$emit您的bank_list选择更改时的一个事件，请在父级中侦听此事件，然后branch_list在父级中也更新您的事件。新值将被自动传播给孩子，因为它被绑定为一个道具。

简而言之：尽可能将数据所有权保持在组件树的下方，如果更进一步的更改会对您的数据产生任何影响，则从子组件发出事件，在数据所有者组件中侦听它们，然后更新您的数据在那里并让它再次向下传播。

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

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

推荐阅读