vue & watch props

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="width: 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(`\nthis.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 发布文章使用：只允许注册用户才可以访问！

---