6

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

Michael
  • 4,538
  • 5
  • 31
  • 58

1 Answers1

10

It should be :disabled and NOT :disable.

 <draggable v-model="copyOfQuestions" @end="$emit('updateQuestionsOrder', copyOfQuestions)" :disabled="disableDraggable" >

Reference:
https://github.com/SortableJS/Vue.Draggable/blob/17bdd4b8b2ab4f4df45dd76edf1afec864ec0936/example/debug-components/slot-example.vue

Shiko
  • 2,448
  • 1
  • 24
  • 31