I wrote a component that is shared throughout my application, in some places I need the dragging/sorting and some do not want it there. I pass a prop to my component called disableDraggable and based on that it should disable, unfortunately it does not do anything, how can I disable the draggable?
I should note I tried both the options object syntax and also a simple :disable , here is the relevant code:
<draggable v-model="copyOfQuestions" @end="$emit('updateQuestionsOrder', copyOfQuestions)" :options="{disable : disableDraggable}">
// or :disable="disableDraggable"
<v-card flat class="list_outer_block" v-for="q in questions" :key="q.question_id">
<v-card-text class="pa-0">
<v-layout justify-start align-center>
<v-flex initial-xs px-2 py-3 class="handle minwdth-0" :title="$t('general.drag_for_reorder')">
<v-icon class="text--secondary text--lighten-3">$vuetify.icons.drag_indicator</v-icon>
</v-flex>
....
props: ['questions', 'disableDraggable'],
How can I disable the draggable functionality?
I should note that vue-draggable (what I am using) supposedly has the same api as SortableJs
It should be :disabled and NOT :disable.
<draggable v-model="copyOfQuestions" @end="$emit('updateQuestionsOrder', copyOfQuestions)" :disabled="disableDraggable" >