Vue.js 父组件仅将动态v模式ID传递给分页中第一页的子组件

我正在使用

vue@2.6.11

和

引导-vue@2.11.0

我有一个名为

index.vue

的组件来列出所有客户。 以及一个子组件

customerModal.vue

，用于控制

Edit

和

Create

Cusotmer表单的

v-modal

我正在使用

v-table

列出带有按钮操作的客户详细信息

index.vue//客户创建btn

index.vue//客户编辑btn

index.vue//b-分页

customerModal.vue

问题 当我使用

b-pagination

进入下一页时，btn

edit

不会显示相应的v-model。在第一页中，每个客户的所有

edit

BTN都工作正常

但是，如果我将

create

btn添加到第二页的列表中，它将正常工作

---

问题是Vue试图重用第1页上的模式，以节省重新渲染的工作量

问题的根源在于，在模态组件中，您将

this.customer

设置为

this.selectedCustomer

在

create

钩子中，而不是在其他地方。由于

create

不会在第2页再次运行，因此它不会更新

this.customer

，这意味着ID仍将与第1页的行匹配

从长远来看，重新思考这一逻辑可能是一个好主意

但您应该能够通过将

：key=“data.item.id”

添加到

客户模式中来解决此问题，这将在
id
更新时强制Vue重新呈现模式。因此，它无法尝试跨页面重用modals




工作代码段（基于此文件中的codepen）


Vue.use（window.vuelidate.default）；
const{required，email，numeric，minLength，maxLength}=window.validators；
设OMDModal={
道具：[“selectedCustomer”、“modalType”、“customers”]，
模板：“#客户模式”，
验证：{
客户：{
姓名：{
必修的，
minLen:minLength（3），
maxLen:maxLength（12）
},
姓氏：{
必修的，
minLen:minLength（3），
maxLen:maxLength（12）
},
电邮：{
必修的，
电子邮件，
isUnique：函数（val）{
如果（val==“”）返回true；
else if（val==this.currentEmail）返回true；
返回axios.get（`api/validateEmail/${val}`）。然后（（res）=>{
返回res.data.unique；
});
}
}
}
},
数据（）{
返回{
当前电子邮件：“”，
警报秒：0，
警报持续时间：5，
警报信息：“”，
警告颜色：“，
客户：{
id:“”，
名字：“，
姓氏：“，
电子邮件：“
},
客户默认设置：{
姓名：[]，
姓氏：[]，
电子邮件：[]
}
};
},
观察：{
“客户名”（纽瓦尔、奥德瓦尔）{
如果（this.modalType==“编辑”）{
此.customer\u default.first\u name.push（oldVal）；
}
},
“客户姓氏”（newVal，oldVal）{
如果（this.modalType==“编辑”）{
此.customer\u default.last\u name.push（oldVal）；
}
},
“customer.email”（newVal、oldVal）{
如果（this.modalType==“编辑”）{
此.customer\u默认.email.push（oldVal）；
}
}
},
计算：{
莫达利德（）{
如果（this.modalType==“创建”）{
返回“CustomerModel”；
}否则{
返回此.customer.first\u name.replace（/\s/g，“”）+this.customer.id；
}
},
现在（）{
康斯特·蒙纳姆斯=[
“简”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“九月”，
“十月”，
“11月”，
“十二月”
];
const today=新日期（）；
let day=today.getDate（）.toString（）；
让month=（today.getMonth（）+1.toString（）；
让year=today.getFullYear（）.toString（）；
返回年份+“-”+月份+“-”+天；
},
第一个名称验证（）{
如果（此$v.customer.first_name.$dirty）{
return！this.$v.customer.first_name.$anyError；
}否则返回null；
},
last_nameValidate（）{
如果（此.$v.customer.last_name.$dirty）{
return！this.$v.customer.last_name.$anyError；
}否则返回null；
},
emailValidate（）{
如果（此.$v.customer.email.$dirty）{
return！this.$v.customer.email.$anyError；
}否则返回null；
}
},
方法：{
setFirstName（e）{
this.customer.first_name=e；
这是$v.customer.first_name.$touch（）；
},
setLastName（e）{
this.customer.last_name=e；
此.$v.customer.last_name.$touch（）；
},
电子邮箱（e）{
this.customer.email=e；
这是。$v.customer.email。$touch（）；
},
resetModal（）{
这个.$nextTick（（）=>{
这个。$v.$reset（）；
});
如果（this.modalType==“创建”）{
此。客户={
id:“”，
名字：“，
姓氏：“，
电子邮件：“
};
}
if（this.alert_color！=“success”）{
if（this.customer\u default.first\u name[1]！=未定义）{
this.customer.first_name=此.customer_默认值.first_name[1]；
}
if（this.customer\u default.last\u name[1]！=未定义）{
this.customer.last_name=this.customer_默认值.last_name[1]；
}
if（this.customer\u default.email[1]！=未定义）{
this.customer.email=this.customer\u default.email[1]；
}
}
},
提交（v，e）{
v、 客户。$touch（）；
我
<!-- {{-- CREATE CUSTOMER --}} -->

    <b-button   @click="$root.$emit('bv::show::modal', 'customerModal' , $event.target)"  variant="success" title="Create New Customer">
        <i class="fas fa-plus-circle" id="action-icon" style="right:3%"></i>
    </b-button>  

    <!-- Modal Customer -->
    <customer-modal   :customers="customers"   modalType="create" @create-customer="customers.push($event)"></customer-modal>


<b-table
    show-empty 
    :filter="filter"
    @filtered="on_filtered"
    id="customers-table" 
    :sort-by.sync="sort_by"
    :sort-desc.sync="sort_desc"
    :items="customers" 
    :fields="fields" 
    :per-page="per_page" 
    :current-page="current_page" 
    responsive
    hover
    head-variant="light"
    class="text-center mt-4"
    >
        <template v-slot:cell(actions)="data">      
            <div class="btn-group" role="group">

                <!-- {{-- EDIT CUSTOMER --}} -->
                <b-button   @click="$root.$emit('bv::show::modal', data.item.first_name.replace(/\s/g, '')+data.item.id, $event.target)" variant="primary" title="Edit Customer">
                    <i class="fas fa-edit"></i>
                </b-button>

                <!-- Customer Modal-->
                <customer-modal  modalType="edit" :selectedCustomer="data.item" :customers="customers" @update-customer="data.item = $event"></customer-modal>

            </div>                
        </template>

            <b-pagination
                        class=" m-auto justify-content-center"
                        pills
                        :per-page="per_page"
                        :total-rows="rows"
                        v-model="current_page"
                        aria-controls="#customers-table"

                    >
            </b-pagination>

       <b-modal
            :id="this.customer.first_name.replace(/\s/g, '')+this.customer.id || 'customerModal'"
            title="Customer Modal"
            @hidden="resetModal"
            hide-footer
        >