Q&A
Laravelタグを見て飛んできましたが、Laravel関係ない質問でしたね・・・。
質問を編集して、Laravelタグを削除することをおすすめします。
独学でvue.jsを勉強中の者です。
初歩的な質問になりますが、回答いただけると幸いです。
やりたいこと
特定の子要素（.field__work__content）をもつ親要素（draggable）のdisabledを動的（@choose="dragStart"）にtrueにしたいです。
質問内容
１.取得したDOM要素から<draggable v-bind:disabled>をtrueにできるか
２.できない場合、やりたいことをどのように実現すべきか、方向性だけアドバイスいただけると幸いです
コード
vue
1<!DOCTYPE html> 2<html lang="ja"> 3<body> 4 <draggable 5 class="work-field__work__inner" 6 :disabled="isDrag" 7 ref="dragTarget" 8 @choose="dragStart" 9 @end="dragEnd" 10 > 11 <div class="field__work__content" v-if="特定の条件"></div> 12 </draggable> 13 <draggable 14 class="work-field__work__inner" 15 :disabled="isDrag" 16 ref="dragTarget" 17 @choose="dragStart" 18 @end="dragEnd" 19 > 20 <div class="field__work__content" v-if="特定の条件"></div> 21 </draggable> 22 <draggable 23 class="work-field__work__inner" 24 :disabled="isDrag" 25 ref="dragTarget" 26 @choose="dragStart" 27 @end="dragEnd" 28 > 29 <div class="field__work__content" v-if="特定の条件"></div> 30 </draggable> 31 <script> 32 export default { 33 components: { 34 draggable 35 }, 36 37 data: function () { 38 return { 39 isDrag: false; 40 // field__work__contentクラスを持つDOMを取得 41 worskLists: document.getElementsByClassName('field__work__content'), 42 } 43 }, 44 methods: { 45 dragStart: function() { 46 // 配列の数を取得 47 let dragNum = this.worskLists.length; 48 for (let i = 0; i < dragNum; i++) { 49 // 配列の親要素(draggable)を配列に取得 50 let draggableLists = this.worskLists[i].parentNode; 51 52 // 親要素(draggable)のv-bind:disabledをtrueにする 53 this.worskLists[i].parentNode[this.isDrag] = true; 54 }; 55 }, 56 dragEnd: function() { 57 this.isDrag = false; 58 } 59 }, 60 } 61 </script> 62</body> 63</html>
回答1件
0
ベストアンサー
特定の子要素（.field__work__content）をもつ親要素（draggable）のdisabledを動的（@choose="dragStart"）にtrueにしたいです。
逆で、draggableがtrueの時に、子要素を表示、と考える方が良いです。
また、isDragが全部のdraggbleで共有されているのもおかしいように思えます。
ref="dragTarget"
@choose="dragStart" @end="dragEnd"
この辺もすべてで共通なのもおかしいです。
まずは適切なdataを設計すべきです。（まずは考えてみましょう。）
投稿2021/01/06 10:49
総合スコア5036
あなたの回答
tips
プレビュー
