vueのデータバインディングに、条件分岐で動的に変更を加えたい

Question

初学者です。
独学で進めているため、トンチンカンな質問になっていたら、申し訳ございません。

現状のコード

<div class="parent" v-for="i in 3">
	<draggable
		class="drag"
		:disabled="false"
		@mouseover="dragPossible"
		@mouseout="dragImpossible"
	>
		<div class="children" v-show="child[i]"></div>
	</draggable>
</div>
<script>
	export default {
		components: {
			draggable
        },
        data: function () {
            return {
                child1: true,
                child2: false,
                child3: true,
            }
        },
        methods: {
        	dragPossible: function() {
        		// マウスオーバーした際、<draggable>を:disabled="false"にする
        	},
        	dragImpossible: function() {
        		// マウスアウトした際、disabled="false"にしたものを、disabled="true"に戻す
        	},
        }
    }
</script>

やりたいこと・仕様

１．<div class="children">を持っている<draggable>（1つ目と3つ目）は、:disabled="true"にする
２．mouseoverしている<draggable>（1つ目と3つ目）は、:disabled="false"にする
３．２で:disabled="false"にしたものを、mouseoutしたタイミングで:disabled="true"に戻す

質問

１．v-bindディレクティブに単一の式の記述はできるのか（書き方が誤っているだけ）
２．DOM（document.getElementsByClassName）で取得した配列から、v-bindディレクティブを操作できるのか（書き方が誤っているだけ）
３．上記いずれも誤っている場合、方向性だけご教授いただきたいです

やったこと

上記を解決するために、以下の2つに取り組みました。

１．v-bind:disabledに直接、計算式を書く

<draggable
	class="drag"
	:disabled="child1 ? 'true' : 'false'"
	@mouseover="dragPossible"
	@mouseout="dragImpossible"
>
// 全てtrueになってしまう（質問1の箇所）

２．DOMで<div class="children">を持っている<draggable>を配列で取得して、DOMから直接:disabledをfalseにする

dragPossible: function() {
	// childrenクラスを持つDOMを配列で取得
	let targetLists = document.getElementsByClassName('children');
	// 取得した配列の数を取得する
	let targetLength = targetLists.length;
	// 配列の中身を出力する
	for (let i = 0; i < targetLength; i++) {
        // 親element（<draggable>）のdisabledをtrueに変更
		targetLists[i].parentElement.disabled = true;                 // 変化なし 
		targetLists[i].parentElement[disabled] = true;                // 変化なし 
		targetLists[i].parentElement.getAttribute['disabled'] = true; // 変化なし 
	};
}
// DOMから、draggableの:disabledは操作できない？（質問2の箇所）

お力添えいただけると幸いです。
どうぞ、よろしくお願いいたします。

Answer 1

:disabled="child1 ? 'true' : 'false'"

ここですが、文字列の　'true' : 'false'はどちらもtrueとして解釈されるのでは？
child1 ? true:false
では。

それはそれとして

child[i]

そもそもchildというdataがありません。
あるのはchild1,child2,chhild3ですよね。

return {
  children:[
  true,
  false,
  false
  ]
}

みたいな感じで配列を駆使した方が良いと思います

Comments

[--shiori--]

誠に有難うございます！
child1 ? true:false
で、解決しました、、、

後半の箇所も、ご指摘、有難うございます！