Vuejsの値取得がうまくいかない。axiosで非同期通信がしたい

Vue.js、ライブラリaxiosを用いて非同期通信を行おうと思っていますが正しくPOSTすることができません。

下記に書いたVuejs1では値を取得することができず、Vuejs2ではコードがコメントアウトされてしまいます。
なぜこの様になってしまうかなど教えていただけますと幸いです。

HTML
1    <div class="review_submit">
2        <div class="review_star">
3            <input id="star1" type="radio" name="star" value="5" v-model="reviewStarValue"/>
4            <label for="star1"><span class="text">最高</span>★</label>
5            <input id="star2" type="radio" name="star" value="4" v-model="reviewStarValue"/>
6            <label for="star2"><span class="text">良い</span>★</label>
7            <input id="star3" type="radio" name="star" value="3" v-model="reviewStarValue"/>
8            <label for="star3"><span class="text">普通</span>★</label>
9            <input id="star4" type="radio" name="star" value="2" v-model="reviewStarValue"/>
10            <label for="star4"><span class="text">悪い</span>★</label>
11            <input id="star5" type="radio" name="star" value="1" v-model="reviewStarValue"/>
12            <label for="star5"><span class="text">最悪</span>★</label>
13        </div>
14
15        <div class="review_textarea">
16            <textarea style="height: 180px;" placeholder="内容を入力してください。" v-model="reviewTextAreaValue"></textarea>
17        </div>
18        <div class="button_no1 review_botton">
19            <p v-on:click="review">投稿する</p>
20        </div>
21    </div>

Vuejs1
1    var review_post = new Vue({
2        el: '.review_botton',
3        data: {
4            reviewStarValue: '',
5　　　　　　　reviewTextAreaValue: '',
6        },
7        methods: {
8            review: function () {
9                axios.post('/test/post',{
10                starValue: this.data.reviewStarValue,
11                textAreaValue: this.data.reviewTextAreaValue,
12            })
13            }
14        }
15    });

Vuejs2
1    var review_post = new Vue({
2        el: '.review_submit',
3        data: {
4            reviewStarValue: '',
5　　　　　　　reviewTextAreaValue: '',
6        },
7        methods: {
8            review: function () {
9                axios.post('/test/post',{
10                starValue: this.data.reviewStarValue,
11                textAreaValue: this.data.reviewTextAreaValue,
12            })
13            }
14        }
15    });

行動規範の内容に同意します

回答1件

自己解決

thisの指定が間違っていました。

HTML
1    <div class="review_submit">
2        <div class="review_star">
3            <input id="star1" type="radio" name="star" value="5" v-model="reviewStarValue"/>
4            <label for="star1"><span class="text">最高</span>★</label>
5            <input id="star2" type="radio" name="star" value="4" v-model="reviewStarValue"/>
6            <label for="star2"><span class="text">良い</span>★</label>
7            <input id="star3" type="radio" name="star" value="3" v-model="reviewStarValue"/>
8            <label for="star3"><span class="text">普通</span>★</label>
9            <input id="star4" type="radio" name="star" value="2" v-model="reviewStarValue"/>
10            <label for="star4"><span class="text">悪い</span>★</label>
11            <input id="star5" type="radio" name="star" value="1" v-model="reviewStarValue"/>
12            <label for="star5"><span class="text">最悪</span>★</label>
13        </div>
14
15        <div class="review_textarea">
16            <textarea style="height: 180px;" placeholder="内容を入力してください。" v-model="reviewTextAreaValue"></textarea>
17        </div>
18        <div class="button_no1 review_botton">
19            <p v-on:click="review">投稿する</p>
20        </div>
21    </div>

vue
1    var review_post = new Vue({
2        el: '.review_submit',
3        data: {
4            reviewStarValue: '',
5            reviewTextAreaValue: '',
6        },
7        methods: {
8            review: function () {
9                axios.post('/test/post',{
10                reviewStarValue: this.reviewStarValue,
11                reviewTextAreaValue: this.reviewTextAreaValue,,
12            })
13            }
14        }
15    });