PrimeVue Dropdown: use command callback to assign value

Question

I am using the Dropdown component to allow users toggle between two views. This works fine. Both views contains forms the users can interact with. Now, i need to implement a "Changes unsaved, do you want to leave" dialog when a user changes the view mode using the dropdown. Thus, i added a command: () => {} to the options for the dropdown.

However, the v-model is changed regardless of the logic in the command callback. I then used a within the dropdown and used the click event to call the callback. This approach calls the callback function but the v-model still changes even when the callback does not change it.

Has anyone done anything similar to this? Is there a better way of doing this?

Snippet:

<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'
    }
   }
  }
]

iampapagray · Accepted Answer · 2023-12-15 13:32:07Z

0

I have been able to achieve my goal by removing the v-model prop from Dropdown. And then to give visuals on the active mode, i pass the mode to the placeholder instead. Hope this helps others.

<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>

Doing this prevents vue and the component (i'm not sure which) from automatically assigning the selected option to the mode variable.

answered Dec 15, 2023 at 13:32

iampapagray

631 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Morteza · Accepted Answer · 2023-12-19 14:03:56Z

you put your @click on the option so when it's clicked the dropdown does its job and don't think about your function. put @click on your dropdown and then check if the value you want is clicked or not then do what you want and don't forget that if you don't want to change the v-model, set it to your previous value

<script setup>
function onClickHandler() {
... #other conditions and functions
mode.command()
... #other conditions and functions
#if needed you can set your mode in here
}
</setup>

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

Collectives™ on Stack Overflow

PrimeVue Dropdown: use command callback to assign value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related