vue新增和编辑共用的组件，在实现新增时渲染不出新的数据，分页也没办法多出该有的数量。

Question

问题：我在子组件点击新增数据之后打印出来有新数据，但是父组件是点击分页打印出的list，才看到我新增的数据在数组里面。页面并没有渲染出来新的数据，分页也没有更新。
我这是逻辑有啥问题吗？还没有接接口。

父组件代码：

<template>
  <div class="home">
    <div class="home-header">
      <van-button icon="plus" type="info" @click="addData">报单</van-button>
    </div>
    <div class="home-context">
    /////////////这里是我渲染的列表///////////////////////////
      <span class="title">订单列表</span>
      <div id="orderInfo" v-for="(item, key) in form" :key="key">
        <van-cell-group @click="showList(item)" class="info-list">
          <van-cell title="编码：" :value="item.id" />
          。。。。。。
        </van-cell-group>
        <div class="info-btn-box">
          <van-button type="info" @click="editData(item)">编辑</van-button>
          <van-button type="info" @click="delList(key)">删除</van-button>
        </div>
      </div>

      <!-- 订单列表分页 -->
      <div class="order-btn-box">
        <van-pagination
          v-model="currentPage"
          @change="handleCurrentChange"
          :items-per-page="pageSize"
          :total-items="totalItems"
          :page-count="pageCount"
          mode="simple"
        />
      </div>
    </div>
    <!-- 订单页面弹出层/组件 -->
    <div class="order-popup-box">
      <!-- 报单/编辑弹出层 -->
      <van-popup
        class="edit-popup"
        closeable
        close-icon="close"
        :style="{ width: '100%' }"
        v-model="showEdit"
      >
        <my-edit :modify="modify" @add="add" @cancels="cancels"></my-edit>
      </van-popup>
    </div>
  </div>
</template>

<script>
import XLSX from "xlsx";
import Details from "./Details";
import Edit from "./Edit";
export default {
  data() {
    return {
      showEdit: false, // 新增/编辑弹出层
      flag: 1,
      type: 1,
      currentPage: 1, // 分页初始值
      pageSize: 2, // 每页显示条数
      pageCount: 2, // 总页数
      totalItems: 4, // 总条目数
      modify: "", // edit组件传值变量
      form: [],
      reportList: [
        {
          id: "O00001A80V",
          proName: "天涯",
          name: "孙晋华",
          phone: "18456744876",
          address: "江苏省苏州市吴中区木渎镇殷家弄24号",
          date: "2020-08-19",
          CODname: "六胜肽原液",
          spacs: "10瓶",
          retail: "紫罗兰+莹莹",
          monadNum: "4",
          num: "7",
          freight: "2340",
          cost: "43",
          createTime: "2020-8-20 15:11:18",
          remark: "",
        },
        。。。。。。
      ], // 模拟订单列表数据
      filterReportList: [], // 搜索后订单列表数据
      js: false, //检索前后
    };
  },
  watch: {},
  components: {
    "my-edit": Edit, // 新增/编辑
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 接收数据
    getData() {
      this.totalItems = this.reportList.length;
      if (this.totalItems > this.pageSize) {
        for (let index = 0; index < this.pageSize; index++) {
          this.form.push(this.reportList[index]);
        }
      } else {
        this.form = this.reportList.map((item) => item);
      }
    },
    // 分页处理
    currentChangePage(list) {
      console.log(list)
      let num = (this.currentPage - 1) * this.pageSize;
      let to = this.currentPage * this.pageSize;
      this.form = [];
      for (; num < to; num++) {
        if (list[num]) {
          this.form.push(list[num]);
        }
      }
    },
    // 分页处理
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      //需要判断是否检索
      if (!this.js) {
        this.currentChangePage(this.reportList);
      } else {
        this.currentChangePage(this.filterReportList);
      }
    },
    // 清除搜索数据
    clear() {
      this.orderID = "";
      this.reaper = "";
      this.tel = "";
      this.address = "";
      this.productName = "";
      this.person = "";
      this.date = "";
    },
    //用两个变量接收currentChangePage函数的参数
    doFilter() {
      this.js = true;
      this.currentPage = 1;
      this.filterReportList = [];
      this.reportList.forEach((value) => {
        if (value.name) {
          if (value.name.indexOf(this.reaper) >= 0) {
            this.filterReportList.push(value);
          }
        }
      });
      //页面数据改变重新统计数据数量和当前页
      this.currentPage = 1;
      this.totalItems = this.filterReportList.length;
      //渲染表格,根据值
      this.currentChangePage(this.filterReportList);
      //页面初始化数据需要判断是否检索过
      this.flag = true;
      this.searchBox = false;
    },
    // 报单弹出层
    addData() {
      this.showEdit = true;
      this.modify = {
        id: "",
        proName: "",
        name: "",
        。。。。
      };
    },
    // 页面编辑
    editData(row) {
      this.showEdit = true;
      this.modify = row;
    },
    // 子组件保存关闭弹出框
    cancels() {
      this.showEdit = false;
    },
    // 子组件新增数据传回
    add() {
      this.reportList.unshift(this.modify);
      // this.$emit('add', this.modify)
    }，
  },
};
</script>

子组件代码：

<template>
  <div class="edit" :class="showDate || showPicker || showSpeci?'active':''">
    <div class="edit-box" v-for="(item, key) in formDate" :key="key">
      <span class="title">订单与分销</span>
      ////////////////////填写好信息再点击保存/////////////////////
      <van-button type="primary" @click="submitForm('formDate')">保存</van-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["modify", "cancels"],
  data() {
    return {
      flag: 1, // 人员/产品/产品规格切换旗帜
      adup: 1, // 保存后编辑/新增切换旗帜
      formDate: [], // 编辑/新增表单名
      speciKeys: "",
    };
  },
  watch: {
    modify: { // 监控父组件传值
      handler(newVal) {
        if (this.formDate === []) {
          this.list.push({ name: "aaa", num: 4 });
          this.formDate.push(newVal);
        } else {
          this.list = [];
          this.formDate = [];
          this.formDate.push(newVal);
        }
      },
      // deep: true,
      immediate: true,
    },
  },
  mounted() {},
  components: {},
  methods: {
    submitForm() { // 子组件保存数据
      this.$emit("modify", this.modify);
      this.$emit("cancels");
      this.$emit('add');
      console.log(this.modify)
    },
  },
};
</script>

Answer 1

等待大神解答