vue+vantUI的父子组件,编辑和添加是一个组件这个功能怎么处理?

this.type:判断是弹出的应该是编辑框还是添加框,为2就直接打开添加框,然后给他传了个空数组。(添加框这个实现不了)

this.deps:处理点击添加框关闭后,再次点击编辑会多出一次数据。不为空时把数据清空再打开编辑框。

点击编辑和添加是一个组件这个功能该怎么实现?

image.png

组件中的代码
image.png

流程是点击编辑弹出编辑框,当编辑被点击要弹出编辑框时报错是因为我的判断那里ifelse传过去的数据为空了。

阅读 2.5k
3 个回答

child页面配置:
html:
image.png
image.png

子组件的script有

props: ["modify"],
data() {
return {
  formDate: [],
  forms: {
    id: "",
    proName: "",
    name: "",
    phone: ""
  },
};
},
watch: {
// immediate: true, // 将立即以表达式的当前值触发回调
// modify: function () {
//   this.forms = this.modify;
//   console.log(this.forms);
// },
modify: {
  handler(newVal) {
      this.forms = newVal;
    if (this.formDate === []) {
      this.formDate.push(this.forms);
    }else{
      this.formDate = [];
      this.formDate.push(this.forms);
    }
  },
  // deep: true, //  watch无法检测到深层key属性时使用
  immediate: true, // watch检测到值变化并且立刻使用
},
},
mounted() {
},
components: {},
methods: {
    // submitForm(formName) {
    // },
    cancel() {
        this.$emit("cancel");
    },
}

父级页面配置:
父组件的script有

import Edit from "./edit";
data() {
    return {
      showEdit: false,
      addTo: true,
      modify: "",
    };
},
mounted() {
},
components: {
    "my-edit": Edit,
},
methods: {
addData() {
      this.showEdit = true;
      this.modify = {
        id: "",
        proName: "",
        name: "",
        phone: "",
      };
    },
    editData(row) {
      this.showEdit = true;
      this.modify = row;
    },
    cancels() {
      this.showEdit = false;
    },
}

image.png
image.png
不需要用ui组件的直接把数据showEdit放到下面button中去
image.png

提示的很明显了,showDate和showPicker被引用了,但是你没有定义,去定义一下就好了。你没有贴出来引用这块的代码,不好判断

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题