Laravel + Vue axiosでgetしてきた値をVueのフォームで送る方法

Question

前提

Laravel
Vue

できていること

Vueのaxiosで値をGetして、その値を表示させることはできた

つまづいていること（要件定義）

Getしてきた値をフォーム送信で送るため、自動でその値を入れたいのですが、
{{ user.id }}をv-modelに入れてみたり、v-modelをvalueに変えて入れてみたりしても
コンパイルエラーが出てうまくできません。

また、axios.post('/api/topics', {…………})でLaravel側に値を渡すのですが、
dataの「user_id: '',」を「user_id: user.id,」と書いてもうまく値を入れることができません。

どうすれば、この要件を達成することができるでしょうか？
お詳しい方、ご教示お願いします。

[参考]Laravel + SPA投稿アプリ作成方法

こちらのサイトでSPAの投稿アプリを作成しました。
投稿自体は確認済みです。
Laravel5.6とVue.jsで簡単なシングルページアプリケーション

参考までにフォームのFormのコンポーネントデータのみアップしておきます。

<template lang="html">
    <div class="container">
        <div v-if="saved" class="alert alert-primary" role="alert">
        保存しました
        </div>
        <form>
            <!--
            ここがaxios.get('/api/me')で取得している値。表示はされているので、値は確実に取れている。
            この値を下のhiddenフォームで送りたい。もしくは何らかの形で送りたい。
            -->
            {{ user.id }}
            <input type="hidden" class="form-control" id="TopicUserId" v-model="user_id">
            <div class="form-group">
                <label for="TopicTitle">タイトル</label>
                <input type="text" class="form-control" id="TopicTitle" v-model="title">
            </div>
            <div class="form-group">
                <label for="TopicContent">内容</label>
                <textarea class="form-control" id="TopicContent" rows="3" v-model="content"></textarea>
            </div>
            <button type="submit" class="btn btn-primary" @click.prevent="create">登録</button>
        </form>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            saved: false,
            // axios.get('/api/me')でGetしてきた値をuserの配列に格納
            user: {},

            // 以下3点データベーステーブルのカラム
            user_id: '',
            title: '',
            content: '',
        }
    },
    methods: {
        create : function() {
            // ここでLaravel側に値を渡す
            axios.post('/api/topics', {
                user_id: this.user_id,
                title: this.title,
                content: this.content,
            })
            .then((res) => {
                this.user_id = '';
                this.title = '';
                this.content = '';
                this.saved = true;
                console.log('created');
            });
        }
    },
    // axiosでGetしてきた値
    created() {
        axios.get('/api/me').then(res => {
            this.user = res.data;
        });
    }
}
</script>

Answer 1

getした段階でdataのuserとして持ってる状態なので
post時にもそのまま使えばいい。

templateで使う必要はない。

axios.post('/api/topics', {
                user_id: this.user.id,
                title: this.title,
                content: this.content,
            })

Comments

[DaisukeMori]

ご回答ありがとうございます。
無事送信されました。

念のため<script>タグの中身だけ共有させていただきます。

```js
<script>
export default {
data: function() {
return {
saved: false,
title: '',
content: '',
}
},
methods: {
create : function() {
axios.post('/api/topics', {
user_id: this.user.id,
title: this.title,
content: this.content,
})
.then((res) => {
this.title = '';
this.content = '';
this.saved = true;
console.log('created');
});
}
},
created() {
axios.get('/api/me').then(res => {
this.user = res.data;
});
}
}
</script>
```