vue & watch props
bug
OK
watch: {
// props
// chatObj: () => {
// // bug
// log(`this.chatObj =`, JSON.stringify(this.chatObj, null, 4));
// },
chatObj: (newValue, oldValue) => {
// OK
log(`old chatObj =`, JSON.stringify(oldValue, null, 4));
log(`new chatObj =`, JSON.stringify(newValue, null, 4));
},
},
watch & args
new Vue({
el: '#app',
data: {
text: 'Hello'
},
components: {
'child' : {
template: `<p>{{ myprop }}</p>`,
props: ['myprop'],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
}
}
}
}
});
watch: {
// props
chatObj() {
// bug
log(`this.chatObj =`, JSON.stringify(this.chatObj, null, 4));
},
},
https://stackoverflow.com/questions/44584292/vuejs-2-0-how-to-listen-for-props-changes
https://forum.vuejs.org/t/cant-watch-component-props-as-object/28005
watch deep
deep: true,
const something = {
template: '<div><pre>{{ updateData }}</pre></div>',
props: {
updateData: Object,
},
watch: {
updateData: {
handler (val) {
console.log('watch', val.message);
},
deep: true,
},
},
};
https://codepen.io/xgqfrms/pen/MNmZNo
vue & watch & props
v-if & loading 异步加载数据，然后渲染组件
https://github.com/xgqfrms/vue/issues/86
demo
parent
child
<template>
<el-dialog
title="表单编辑"
class="form-modal-box"
:before-close="closeForm"
:visible.sync="visible">
<el-form
:rules="rules"
size="small"
:model="form">
<el-form-item
label="投放链接"
prop="putLink"
class="required-symbol"
:label-width="formLabelWidth">
<el-input
class="required-input"
v-model="form.putLink"
@input="inputChange"
@change="inputChange"
autocomplete="off">
</el-input>
</el-form-item>
<el-form-item
label="主标题"
class="required-symbol"
prop="title"
:label-width="formLabelWidth">
<el-input
class="required-input"
v-model="form.title"
autocomplete="off">
</el-input>
<el-alert
class="required-input"
v-if="titleLengthLimit"
:closable="false"
title="主标题: 长度 8个字以内"
type="warning">
</el-alert>
</el-form-item>
<el-form-item
label="副标题"
class="required-symbol"
prop="subTitle"
:label-width="formLabelWidth">
<el-input
class="required-input"
v-model="form.subTitle"
autocomplete="off">
</el-input>
<el-alert
class="required-input"
v-if="subTitleLengthLimit"
:closable="false"
title="副标题: 长度 13个字以内"
type="warning">
</el-alert>
</el-form-item>
<!-- <el-form-item
label="投放时间"
class="required-symbol"
required
:label-width="formLabelWidth">
<el-date-picker
style=" 100%"
class="required-input"
@change="datePickerHandler"
v-model="form.putTime"
:clearable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-alert
class="required-input"
v-if="dateEmpty"
:closable="false"
title="投放日期不可为空"
type="warning">
</el-alert>
</el-form-item> -->
</el-form>
<div
slot="footer"
class="dialog-footer">
<el-button
size="small"
@click="closeForm">
取消
</el-button>
<el-button
@click="saveForm"
size="small"
type="primary">
确定
</el-button>
</div>
</el-dialog>
</template>
<script>
const log = console.log;
const tomorrow = new Date().getTime() + 3600 * 24 * 1000;
export default {
name: "FormModal",
props: {
dialogFormData: {
type: Object,
default: () => {},
},
dialogFormVisible: {
type: Boolean,
default: () => false,
},
isAdd: {
type: Boolean,
default: () => false,
},
},
data() {
return {
form: {
putLink: "",
title: "",
subTitle: "",
putTime: ["", ""],
},
formLabelWidth: "80px",
visible: false,
rules: {
putLink: [
{
required: true,
message: '请输入投放链接',
trigger: ['blur', 'change'],
},
],
title: [
{
required: true,
message: '请输入主标题',
trigger: ['blur', 'change'],
},
// {
// min: 1,
// max: 8,
// message: '主标题长度在 8 个字以内',
// trigger: ['blur', 'change'],
// },
],
subTitle: [
{
required: true,
message: '请输入副标题',
trigger: ['blur', 'change'],
},
// {
// min: 1,
// max: 13,
// message: '副标题长度在 13 个字以内',
// trigger: ['blur', 'change'],
// },
],
startTime: [
{
type: 'date',
required: true,
message: '请输入投放时间范围',
trigger: ['blur', 'change'],
},
],
endTime: [
{
type: 'date',
required: true,
message: '请输入投放时间范围',
trigger: ['blur', 'change'],
},
],
putTime: [
{
type: 'datetimerange',
required: true,
message: '请输入投放时间范围',
trigger: ['blur', 'change'],
},
],
},
isValidated: true,
};
},
methods: {
inputChange(value = ``) {
this.form.putLink = value.trim();
},
closeForm() {
this.$emit(`close-put-item`);
},
timeStringToTimestamp(str) {
return new Date(str).getTime();
},
saveForm() {
let {
putId,
putLink,
title,
subTitle,
putTime,
} = this.form;
const flag = this.isAdd;
let data = {
putLink,
title,
subTitle,
// startTime: this.timeStringToTimestamp(putTime[0]),
// endTime: this.timeStringToTimestamp(putTime[1]),
};
if(!flag) {
data = {
id: putId,
...data,
};
}
if(putLink && title && subTitle && putTime[0]) {
this.$emit(`save-put-item`, data, flag);
} else {
this.$message({
type: 'error',
message: '必填字段不可为空!'
});
}
},
datePickerHandler(values = ``) {
// log(`date values`, values[0], values[1]);
this.form.putTime = [values[0], values[1]];
},
},
computed: {
titleLengthLimit() {
const {
title,
} = this.form;
return title.length > 8 ? true : false;
},
subTitleLengthLimit() {
const {
subTitle,
} = this.form;
return subTitle.length > 8 ? true : false;
},
dateEmpty() {
const {
putTime,
} = this.form;
return !putTime[0] ? true : false;
},
},
mounted() {
this.visible = this.dialogFormVisible;
},
watch: {
isAdd(newProp, oldProp) {
log(`
this.isAdd`, newProp, oldProp);
// this.isAdd = newProp;
},
dialogFormVisible(newProp, oldProp){
this.visible = newProp;
this.form = {
putLink: "",
title: "",
subTitle: "",
putTime: [moment().format('YYYY-MM-DD HH:mm:ss'), moment(tomorrow).format('YYYY-MM-DD HH:mm:ss')],
};
},
dialogFormData(newProp, oldProp){
if (this.isAdd) {
this.form = {
putLink: "",
title: "",
subTitle: "",
putTime: [moment().format('YYYY-MM-DD HH:mm:ss'), moment(tomorrow).format('YYYY-MM-DD HH:mm:ss')],
};
} else {
this.form = newProp;
}
},
},
beforeDestroy() {
log(`before destroy`);
},
destroyed() {
log(`destroyed`);
},
}
</script>
<style lang="less">
@import url("./form-modal.less");
</style>
modal
parent
<!-- modal -->
<FormModal
:dialogFormVisible="dialogFormVisible"
:isAdd="isAdd"
:dialogFormData="dialogFormData"
@close-put-item="closePutItem"
@save-put-item="savePutItem"
/>
methods: {
openPutItem() {
this.isAdd = true;
this.dialogFormData = this.initFormData;
this.dialogFormVisible = true;
},
closePutItem() {
this.dialogFormVisible = false;
},
savePutItem(data = {}, flag = false) {
this.closePutItem();
this.updateData(data, flag);
},
}
child
closeForm() {
this.$emit(`close-put-item`);
},
refs
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！