为什么vue3二次封装el-transfer,数据更新视图不刷新?

Question

为el-transfer添加了一个右侧列表上下排序的功能,但是点击之后数组数据更新了,视图却没刷新.代码如下:

const publicMobileMethod = (direction: string) => {
  let index;
  if (chooseItem.value.length === 1) {
    keyList.value.forEach((element, i) => {
      if (element === chooseItem.value[0]) {
        index = i;
      }
    });
    if (index === 0) {
      ElMessage.warning("The first item cannot be moved up.");
      return;
    }

    if (index === keyList.value.length - 1 && direction !== "handleUp") {
      ElMessage.warning("The last item cannot be moved down.");
      return;
    }
    const changeItem = keyList.value[index];
    // 这里视图还能更新
    keyList.value.splice(index, 1);

    // 这个if一写就不行了;
    if (direction) {
      direction === "handleUp" &&
        keyList.value.splice(index - 1, 0, changeItem);
      direction === "handleDown" &&
        keyList.value.splice(index + 1, 0, changeItem);
      console.log("keyList", keyList.value);
    }
  } else {
    ElMessage.warning("Please select only one item to move.");
    return;
  }

Answer 1

这里是否有报错