监听器watch导致的BUG

122 阅读1分钟
watch: {
    ruleForm: {
      handler (newName) {
        this.$emit('newForm', newName)
      },
      immediate: true,
      deep: true
    }
  },
  // 表单数据
  diaLogForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },

监听子组件表单对象在父组件发送请求,请求参数中还有一个id是表单中没有的 直接在传过去的事件里面将id给diaLogForm对象的话,监听器监听到数据变化就会直接吧id属性覆盖,导致参数缺失id!!! 所以先把id单独存起来, 在点击确认发送请求之前再赋值给对象id属性


getIdEdit (idEdit, data) {
      this.idEdit = idEdit
      if (idEdit) {
      // 这样干
        this.id = data.id
        // 不要这样干
        this.diaLogForm.id = data.id
        // 不要这样干
      }
    },
    
// 添加编辑确认
    confirm () {
      this.$refs.DialogForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.idEdit) {
          // 这里
            this.diaLogForm.id = this.id
            await update(this.diaLogForm)
          } else {
            await add(this.diaLogForm)
          }
          this.getList()
          this.dialogVisible = false
        }
      })
    },在父组件发送请求,q