vue3对象里面的数组push数据，数据失去响应，应该如何使数据保持响应式呢？

站长

2024年06月25日 08:36 · 阅读数 10


const addData = ref({
  recordName: "",
  appointmentStartTime: "",
  appointmentEndTime: "",
  departurePlace: "",
  arrivalPlace: "",
  vehicleId: "",
  vehicleNumber: "",
  driverId: "",
  nickName: "",
  recordStatus: "",
  reason: "",
  taskRemark: "",
  approachPointNum: "",
  simultaneous: "",
  approachPointList: [
    {
      startPoint: "",
      endPoint: "",
      approachStatus: "",
      approachEndStatus: "",
      delFlag: "",
      approachStartComment: "",
      approachEndComment: "",
      approachStartTime: "",
      approachEndTime: "",
      rider: "",
      approachReason: "",
      approachCost: "",
      approachDepartureMiles: "",
      approachArrivalMiles: "",
      approachPointOrder: "",
      expenseLedgerList: [
        {
          expenseType: "",
          expenseAmount: "",
          picture: "",
        },
      ],
      clockList: [
        {
          appointmentPoint: "",
          time: "",
          point: "",
          status: "",
        },
        {
          appointmentPoint: null,
          time: "",
          point: "",
          status: "",
        },
      ],
    },
  ],
});

往approachPointList里面加数据失去响应式

const addclick = () => {
  addData.value.approachPointList.push({
    startPoint: "",
    endPoint: "",
    approachStatus: "",
    approachEndStatus: "",
    delFlag: "",
    approachStartComment: "",
    approachEndComment: "",
    approachStartTime: "",
    approachEndTime: "",
    rider: "",
    approachReason: "",
    approachCost: "",
    approachDepartureMiles: "",
    approachArrivalMiles: "",
    approachPointOrder: "",
    expenseLedgerList: [
      {
        expenseType: "",
        expenseAmount: "",
        picture: "",
      },
    ],
    clockList: [
      {
        appointmentPoint: "",
        time: "",
        point: "",
        status: "",
      },
      {
        appointmentPoint: "",
        time: "",
        point: "",
        status: "",
      },
    ],
  });

1个回答

test

2024-06-25

// 定义响应式数据
// 可以持有任何类型的值，
// 函数接收默认值，返回带有 .value 的对象
// 只有顶级 ref 属性才能被解包
// const { id } = { id: ref(1) }，其中 id 依然返回 ref 对象
const count = ref(0);

// 定义响应式数据
// 绑定变量的数据类型 Object, Array，Map, Set，
// 函数接收默认值，返回原数据的 Proxy
// PS: 输出到模板使用时需要 toRefs 重新编译
// PS：解构操作，或者函数赋值，会直接丢失响应性链接
// PS：{ id } = reactive({ id: 1})，其中 id 是非响应式的
const state = reactive({ count: 0 })


简单地说 
ref 定义响应式的 String, Number, Boolean
reactive 定义响应式的 Object, Array，Map, Set

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容