PrimeVue Dropdown：使用命令回调来赋值

Question

我使用下拉组件来允许用户在两个视图之间切换。 这很好用。两个视图都包含用户可以与之交互的表单。 现在，当用户使用下拉菜单更改视图模式时，我需要实现“更改未保存，您想离开吗”对话框。因此，我在下拉菜单的选项中添加了一个命令：() => {}。

但是，无论命令回调中的逻辑如何，v-model 都会发生更改。 然后我在下拉列表中使用了 a 并使用单击事件来调用回调。这种方法 调用回调函数，但即使回调没有改变，v-model 仍然会改变。

有人做过类似的事情吗？有更好的方法吗？

片段：

<Dropdown
 v-model="mode"
 :options="modeOptions"
 optionLabel="name"
 optionValue="value"
 placeholder="Select Mode"
 size="small"
>
 <template #option="slotProps">
  <div class="flex" @click="slotProps.option.command">
    <div>{{ slotProps.option.name }}</div>
   </div>
 </template>
</Dropdown>


//script
const mode = ref('student')
const isEditing = ref(true)
const modeOptions = [
 {
  name: 'Student',
  value: 'student',
  command: () => {
   if(isEditing.value){ 
    //block mode changing
   }else{
    mode.value = 'student'
    }
   }
  },
   {
  name: 'Teacher',
  value: 'teacher',
  command: () => {
   if(isEditing.value){ 
    //block mode changing
   }else{
    mode.value = 'teacher'
    }
   }
  }
]

Answer 1

通过从 Dropdown 中删除 v-model 道具，我已经能够实现我的目标。 然后为了提供活动模式的视觉效果，我将模式传递给占位符。希望这对其他人有帮助。

<Dropdown
 :options="modeOptions"
 optionLabel="name"
 optionValue="value"
 :placeholder="mode"
 size="small"
>
 <template #option="slotProps">
  <div class="flex" @click="slotProps.option.command">
    <div>{{ slotProps.option.name }}</div>
   </div>
 </template>
</Dropdown>

这样做可以防止 vue 和组件（我不确定是哪个）自动将所选选项分配给模式变量。