Avoid mutating a prop directly since the value will be overwritten whenever
vue项目子组件里的某个方法调用的时候报上述错误1.父组件2.子组件<template><div><div><ep-modeltitle="关联单证"v-model="model1"width="1000px":wrap-close="false"...
·
vue项目子组件里的某个方法调用的时候报上述错误
1.父组件
2.子组件
<template>
<div>
<div>
<ep-model
title="关联单证"
v-model="model1"
width="1000px"
:wrap-close="false"
>
<ep-form
ref="portReleaseInexpRltForm"
:form="portReleaseInexpRltForm"
name-width="163px"
:rules="page_rules"
>
<ep-row :gutter="7">
<ep-col :col="8">
<ep-form-item attr="preentNo" label="凭证编号">
<ep-input
v-model="portReleaseInexpRltForm.preentNo"
name="preentNo"
:maxlength="64"
disabled
></ep-input>
</ep-form-item>
</ep-col>
<ep-col :col="8">
<ep-form-item attr="inExpWhNo" label="ERP/WMS出入库编号">
<ep-input
v-model="portReleaseInexpRltForm.inExpWhNo"
name="inExpWhNo"
:maxlength="64"
:disabled="disabledFlag"
></ep-input>
</ep-form-item>
</ep-col>
<ep-col :col="8">
<ep-form-item attr="inExpTime" label="ERP/WMS出入库日期">
<ep-date
v-model="portReleaseInexpRltForm.inExpTime"
name="inExpTime"
type="dateTime"
:disabled="disabledFlag"
></ep-date>
</ep-form-item>
</ep-col>
</ep-row>
<div style="text-align: center;" v-if="!disabledFlag">
<ep-button
type="primary"
size="small"
@click="addOtherClare"
icon="checkmark-round"
>确认</ep-button
>
</div>
</ep-form>
</ep-model>
<!--表格-->
<div class="ep-card card-margin relative">
<div class="card-body">
<div class="block">
<ep-button
type="success"
size="small"
@click="addOther"
icon="plus-round"
>新增</ep-button
>
<ep-button type="primary" size="small" @click="doUpdate" icon="edit"
>修改</ep-button
>
<ep-button
type="danger"
size="small"
icon="trash-a"
@click="doDelete"
>删除</ep-button
>
</div>
<div class="block">
<ep-table
ref="table"
:height="400"
:data="newDtFormInExpTypeLatedList"
@selection-change="handleSelect1"
:loading="loading"
:head-color="headColor"
@row-dblclick="select2Info"
>
<ep-table-item type="select"></ep-table-item>
<ep-table-item
column="preentNo"
width="300"
title="凭证编号"
></ep-table-item>
<ep-table-item
column="inExpWhNo"
title="ERP/WMS出入库编号"
width="350"
></ep-table-item>
<ep-table-item
column="inExpTime"
title="ERP/WMS出入库日期"
></ep-table-item>
</ep-table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import misList from "src/common/mislist";
import { cloneObj, getToken } from "utils";
import mixin from "../mixin";
export default {
extends: misList, // 务必继承
mixins: [mixin],
components: {},
props: {
dtFormInExpTypeLatedList: {
type: Array,
default: function () {
return [];
},
},
},
data() {
return {
newDtFormInExpTypeLatedList: this.dtFormInExpTypeLatedList,
inexpRltPreentNo: "",
inexpRltPid: "",
headColor: true,
selectItems: [],
info: "",
portReleaseInexpRltForm: {
id: "",
pid: this.inexpRltPid,
orgId: this.$store.getters.getId,
preentNo: this.inexpRltPreentNo,
inExpWhNo: "",
inExpTime: "",
},
model1: false,
loading: false,
disabledFlag: true,
page_rules: {
inExpWhNo: { required: true, message: "不能为空", trigger: "change" },
inExpTime: {
required: true,
message: "不能为空",
trigger: "change",
},
},
};
},
watch: {
dtFormInExpTypeLatedList(val) {
this.newDtFormInExpTypeLatedList = val;
},
},
created() {
this.getFormData1();
},
computed: {},
mounted() {},
methods: {
handleSelect1(val) {
this.selectLength = val.length;
this.selectItems = val;
},
select2Info(event, row, index) {
this.portReleaseInexpRltForm = row;
this.model1 = true;
this.disabledFlag = true;
},
close1Model() {
this.model1 = false;
},
//调接口
addOtherClare(info) {
this.$refs["portReleaseInexpRltForm"].validate((valid) => {
if (!valid) {
this.$pop({
type: "danger",
message: "表单验证失败",
});
return;
} else {
//新增
if (this.info == 1) {
let data = [];
let bodyForm = this.portReleaseInexpRltForm;
data.push(cloneObj(bodyForm));
this.$post("portReleasesaveInexpRlt", data).then((res) => {
this.model1 = false;
this.$emit("addOtherClare", info);
this.dtFormInExpTypeLatedList.push(cloneObj(bodyForm));
this.getFormData();
});
}
//修改
if (this.info == 2) {
let portReleaseInexpRltForm = this.dtFormInExpTypeLatedList[0];
let portReleaseInexpRltFormCopy = cloneObj(portReleaseInexpRltForm);
let data = [];
let bodyForm = this.portReleaseInexpRltForm;
data.push(cloneObj(bodyForm));
this.$post("portReleaseupdInexpRlt", data).then((res) => {
this.model1 = false;
this.dtFormInExpTypeLatedList.push(cloneObj(bodyForm));
this.getFormData();
});
}
}
});
},
//新增
addOther() {
this.model1 = true;
this.disabledFlag = false;
this.info = 1;
this.portReleaseInexpRltForm.inExpWhNo = "";
this.portReleaseInexpRltForm.inExpTime = "";
},
//修改
doUpdate() {
let selectData = this.selectItems;
if (selectData.length === 0 || selectData.length > 1) {
this.$pop({
type: "danger",
message: "请选择一条数据",
});
} else {
//console.log(selectData[0].id);
this.model1 = true;
this.disabledFlag = false;
let inexpId = selectData[0].id;
let dtFormInExpTypeLated1 = this.dtFormInExpTypeLatedList.find(
(item) => item.id == inexpId
);
console.log(dtFormInExpTypeLated1);
this.portReleaseInexpRltForm = dtFormInExpTypeLated1;
this.info = 2;
}
},
//删除
doDelete() {
let selectData = this.selectItems;
if (selectData.length == 0) {
this.$pop({
type: "danger",
message: "请选择数据",
});
return;
}
this.$confirm({
word: "是否要删除所选条目信息!",
callback: (errorInfo) => {
if (errorInfo) {
let id = [];
selectData.forEach((item) => {
id.push(item.id);
});
let ids = id.join();
let data = {};
data["ids"] = ids;
this.$post("portReleasedelInexpRlt", data)
.then((responseData) => {
this.refresh(true);
this.$pop({
type: "success",
message: "删除成功",
});
})
.catch((e) => {
this.loading = false;
});
} else {
return;
}
},
});
},
//详情
getFormData() {
let data = {};
data["id"] = this.$route.query.id;
this.$post("protReleasegetDetail", data)
.then((responseData) => {
this.dtFormInExpTypeLatedList =
responseData.map.data.portReleaseInexpRlt;
//this.$router.go(0);
})
.catch((e) => {});
},
getFormData1() {
let data = {};
data["id"] = this.$route.query.id;
this.$post("protReleasegetDetail", data)
.then((responseData) => {
let inexpRltPreentNo1 = responseData.map.data.preentNo;
this.portReleaseInexpRltForm.preentNo = inexpRltPreentNo1;
let inexpRltPid1 = responseData.map.data.id;
this.portReleaseInexpRltForm.pid = inexpRltPid1;
//this.dtFormInExpTypeLated = responseData.map.data.portReleaseInexpRlt;
//this.$router.go(0);
})
.catch((e) => {});
},
},
};
</script>
父组件的引入组件以及方法省略
过程是这样的
父组件是详情页面,子组件是一个tab页,分组件写的,在子组件里有新增,修改删除事件。然后报了这个错误
3.修改方法
1.tab的数组换个名字
2.return
3.在数据变化的时候用dtFormInExpTypeLatedListData接收
这样就可以了,
总结
props从父组件传递数据到子组件,不能子组件更改修改父组件,单向传递,所以,这个简单点就是找个中间值来代替
更多推荐
已为社区贡献3条内容
所有评论(0)