javascript - html (Django バックエンド) から js (Vue フロントエンド) にデータを送信する方法

Question

私はウェブページを開発しています。この Web ページにログイン フォームがあります。バックエンドに Django、フロントエンドに VueJS を使用しています。Django でフォームを送信するには、Django の要件は CSRF トークンです。私は現在、CSRFトークンをHTMLに表示することができます{{ csrf_token }}.

VueJS を使用しているため、Vuetify も使用してフロントエンドのスタイルを設定します。{{ csrf_token }}VueJS は認識しないが HTML は認識するため、CSRF トークンは VueJS には表示されません。

インターネットで調べたところ、あることがわかりました。v-bind を使用して HTML から VueJS に CSRF トークンを渡そうとしましたが、残念ながら v-bind の値は定義されていません。しかし、ソースコード (Ctrl+U) に移動すると、CSRF Toekn は機能するが、VueJS は認識しないことがわかります。

例：

<div id="LoginApp">
    <WJLogin
        v-bind:csrf="8cl33zQ8pYXXEMVCoSsqIzaFgQkLh6WYXqsQMN4z9X4oGkSGN8Thz922jQ19aG4B"
        v-bind:hello="world">
    </WJLogin>
</div>

VueJS から VueJS へ v-bind を使用すると、これは機能しますが、HTML から VueJS へは機能しません

これはlogin.htmlです

<div id="LoginApp">
    <WJLogin
        :csrf="{{csrf_token}}"
        :hello="world">
    </WJLogin>
</div>

これは WJLogin.vue です

export default
{
    props: {
        csrf: String,
        hello: {
            type: String,
            default: "defaultValue"
        },
    },
..............
............

CSRF トークンの値が VueJS にアクセスできることを期待しています。