在Vue3中实现聊天记录编辑功能时，如何确保同一时间只有一个编辑框开启？

<template>
  <div>
    <dcdialogitem 
      v-for="item in messagelist" 
      :key="item.msg_id" 
      :dialog-data="item" 
      :id="'msg' + item.msg_id" 
      :is-editing="item.msg_id === currentlyEditingMessageId"
      @menuClick="handleMenuClick"
      class="pulldown-list-item" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const messagelist = ref([
  // 消息列表数据，例如：[{ msg_id: 1, content: '消息1' }, { msg_id: 2, content: '消息2' }]
]);

const currentlyEditingMessageId = ref(null);

const handleMenuClick = (val, dialogData) => {
  if (val === '2') { // 假设 '2' 代表编辑操作
    // 关闭所有其他编辑框
    messagelist.value.forEach(item => {
      item.isEditing = false;
    });
    // 打开当前消息的编辑框
    currentlyEditingMessageId.value = dialogData.msg_id;
    dialogData.isEditing = true;
  }
  // 其他菜单项处理逻辑...
};
</script>

<template>
  <div class="chat-container" v-if="props.isEditing">
    <!-- 编辑框内容 -->
    <input v-model="editContent" type="text">
    <!-- 保存按钮等 -->
  </div>
  <div v-else>
    <!-- 显示消息内容 -->
    {{ props.dialogData.content }}
    <!-- 编辑按钮等 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
  dialogData: { type: Object, required: true },
  isEditing: { type: Boolean, default: false }
});

const editContent = ref(props.dialogData.content);

const emit = defineEmits(['menuClick']);

const handleEditClick = () => {
  emit('menuClick', '2', props.dialogData); // '2' 代表编辑操作
};
</script>