v-forを使ってdraggableの一部だけ固定したい

Question

やりたいこと
vue.jsのv-forを用いてindex:0の項目を固定したい

やったこと
itemsにhandle:falseを持たせて判断させる　←失敗

簡潔に書くためにv-forを使って書きたいです。
お手数ですが、ご教示お願いいたします。

<draggable :options="{ handle: '.my-handle' }">
  <v-card
    v-for="(item, index) in items"
    :key="index"
    flat
    class="item"
  >
      <v-layout row align-center>
          <v-icon color="grey ligten-2">
            drag_indicator
          </v-icon>
          {{ item.name }}
      </v-layout>
  </v-card>
</draggable>

  data() {
    return {
      items: [
        { name: '0', handle: false },
        { name: '1'},
        { name: '2'},
        { name: '3'}
      ]
    };
  },

Answer 1

かなり前の質問に対して、今更なのですが、特定の項目だけdraggable対象外にする方法として、
その項目だけイベントを外す対応で動かさなくすることができます。

公式ではdropを抑止する方法ですが、イベントを外す事でdrag startも抑止可能なので、完全に動かさないようにすることができます。

https://zenn.dev/tomosuke/articles/24e492873a7b37

Answer 2

KuwabataKさんの回答にある、サンプルからGitHubを見ると分かりますが、
以下のような感じですね。

draggableにonMoveメソッドをv-bindして、移動できるか判別させています。

//template
<draggable :v-model="list" :move="onMove">
  <div v-for="item in list">{{ item.name }}</div>
</draggable>

//data
list = [
  {name:"first", fixed = true},
  {name:"second", fixed = false},
  {name:"third, fixed = false}
]

//method
onMove({ relatedContext, draggedContext }) {
  const relatedElement = relatedContext.element;
  const draggedElement = draggedContext.element;
  return (
    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
  );
}

Answer 3

<draggable> というのはvue-draggableのことでしょうか？

であれば、handle: falseではなく、fixed:trueで固定できます。

公式サイトのデモが非常にわかりやすいので参考にしてください。

なお vue-draggable は、サードパーティ製のOSSライブラリなので、「vue-draggableを使っています」ということを質問の中で明示しないと、回答者には<draggable>タグが、自分で作った独自コンポーネントなのか、それとも何かのOSSコンポーネントなのかわからないと思います。

Answer 4

v-if を利用して実現するのは難しいです。
そして提示いただいたコードは残念ながら正解には程遠そうです。

提示いただいたコードを修正してどうにかする場合

• class バインディングのオブジェクトは、キーが付与したいクラス名、値が付与するかどうかを決定する真偽値（又は式）です。提示いただいたコードはおそらく逆になっています。
• クラスを付与したいなら（固定したい とのことなので、きっと何らかのスタイルをクラスに設定しているのだと信じて回答しております）、 :options ではなく :class です。
• 対応するアイテムにクラスをつけたいなら、クラスをつけようとするタグが間違っています。
• handle: false としてしまっては、ほかの handle が未定義な item (item.handle == false' が true` となる) と区別することが難しくなります。

<v-card
  v-for="(item, index) in items"
  :class="{ 'my-handle': item.handle }"
  :key="index"
  flat
>
  <!-- ... -->

{ name: '0', handle: true },

もっとスマートに

せっかく v-for="(item, index)" としているのですから、この index を利用すればわざわざ item に handle プロパティを持たせる必要はありません。最初の要素は index が 0 の要素です。

余談ですが

<v-card> の直下に<v-layout> が来ていますが、本当にやりたいことはそれであってますか？
<v-container> は……？

よく理解せずコピペでどうにかなるものでもないので、あきらめて基礎から順番に学んだ方が早いと思います。