Vue.jsとLaravel Bladeの変数を比較したいができない
例）
<div v-for="(task,vueKey) in getTask" class="task" :id="task" :key="vueKey">
<div v-if="vueKey == {{$key}}"> ← ここで比較しているがうまくいっていない
@{{vueKey}}では値は（１）取得できます
{{$key}}で値は（１）取得できます
ただv-ifの書き方が悪いのか比較ができません
サーバーとクライアント間の実行タイミングの違いがあるのですが、Bladeテンプレートはサーバー側でレンダリングされ、その後にブラウザに送信されます。一方で、Vue.jsはブラウザ側で動作します。Bladeによってレンダリングされた時点ではVue.jsの変数は存在しません。そのため、Bladeテンプレート内でVue.jsの変数を直接参照することはできないと思います。
BladeテンプレートはPHPのスコープ内で動作し、Vue.jsはJavaScriptのスコープ内で動作します。これらは異なる実行環境であり、直接の変数の共有はできないですね。
BladeテンプレートでPHP変数の値をJavaScript変数に割り当てる方法を使い、Vue.jsのコンポーネント内で使用できるようになるかと思います。
下記は例えば、こんな感じ。
<script>
var keyFromServer = @json($key); // Laravel BladeでPHP変数をJavaScript変数に割り当てる
</script>
そして、Vueコンポーネント内でこの変数を使用します。
new Vue({
el: '#app',
data: {
keyFromServer: keyFromServer // サーバーからの変数をデータプロパティとして使用
}
});
Vue.jsのテンプレート内で、このJavaScript変数とVueのデータを比較します。
<div v-for="(task, vueKey) in getTask" class="task" :id="task" :key="vueKey">
<div v-if="vueKey == keyFromServer">
<!-- 何かのコンテンツ -->
</div>
</div>