Blade.php→Vue.jsにユーザーIDを渡したい

Question

お世話になっております。タイトルの通り、ブレードファイルからVueの
コンポーネントへユーザーIDを渡したいのですがこのようなエラーが出ており詰まっています。

[Vue warn]: Invalid value for option "props": expected an Array or an Object, but got String.

配列かオブジェクトが渡ってくることを期待してるのにストリングが来てるとのことなので、
Vue側で形式を変えようとしたり、ブレード側でなんとか型を変えることはできないか？と
試行錯誤してますがうまくいきません。

渡ってきている値はint(1)です。
どなたか解決方法を教えていただけないでしょうか？？

Vueファイル---
<template>
    <div>
        <Button>退会する</Button>
    </div>
</template>

<script>
export default {
    name: "DeleteUser",
    props: "UserId",
    data() {
        return {
            UserId: this.UserId,
        };
    },
    computed: {
        chengeUserId: function () {
            return JSON.parse(this.UserId);
        },
    },
    mounted() {
        console.log(this.UserId);
    },
};
</script>

ブレードファイル
<delete-user-component UserId={{ Auth::user()->id }}></delete-user-component>

Answer 1

質問を無視した回答

Auth::user()->idならそもそもVueに渡す必要がない。
Vueからidを指定せずaxios.delete→Laravel側で$request->user()->delete()で削除できるのでidを渡す意味が全くない。
Vueから渡されたidのユーザーを削除してたら完全に脆弱性。

質問を尊重した回答

まずVueのドキュメントをよく読む。
https://v3.ja.vuejs.org/guide/component-props.html
UserIdの前にpropsの使い方を間違えてるエラー。props: []かprops: {}なのにprops: ""。
最短の解決はprops: ["UserId"]だけど別のエラーが出そう。

props: {
  userId: Number,
}

<delete-user-component :user-id="{{ Auth::user()->id }}"></delete-user-component>

Comments

[mii--]

bladeからvueにユーザーIDを渡すことがよくないことを知らなかったので
教えていただきありがとうございます！
教えていただいたやり方で無事実装することができました。