Vue.jsとLaravel間のデータの受け渡し

Question

LaravelとVue.jsを使って課題のプロジェクトを作成しています。自力で頑張っていますが、数日間進めなくなってしまったのでお知恵を貸してください。

blade.phpからcomponent.vueのpropsにデータを渡し、それを展開して各項目を表示しています。
例（v-for="item in items") ({{item.name}}{{item.skill}}など)
ボタンをクリックしたら各itemのページに遷移したいのですが、その際にデータのid(item.id)を渡したいのですが、うまくいきません。

blade.php

<div class="index">
    <skills-component
    v-bind:items="{{ $items }}"
    </skills-component>
</div>

SkillsConponent.vue

<template>
    <div>
        <div v-for="item in items" :key="item.id">
            <div class="detail">
                <h3 class="title">{{ item.name }}</h3>
                <h4 class="skill">{{ item.skill }}</h4>
            <button v-on:click="goToDetail(item.id)" class="c-button">詳細</button>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        props: {
            items: {
                type: Array
            }
        },
        methods: {
            goToDetail(id) {
                axios.get('/items/show/' + id)    
                .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });       
            }
        }
    }
</script>

web.php

省略
Route::get('/items/show/{id}', 'ItemsController@show');
省略

特にエラーが表示されるわけでもなく、画面は正常に表示されています。クリックしても無反応です。

開発環境
Mac
CentOs
Google Chrome

初心者の初歩的なミスかと思いますが、数日悩んでおりますので、お力をお借りできたら嬉しいです！

Comments

[ShintaroNomiya]

「うまくいかない」とはどういう状況でしょうか？
「idが渡せない」のか「クリックしてもページが遷移しない」のどちらかですか？
もし後者ならgoToDetail(id)の中でページ遷移の処理を入れていないので当然な気がしますが…
SPAでなくてよいのであればwindow.location.href = `/items/show/${id}`とかで動きませんか？

[manaw]

ありがとうございます。状況をはっきりと伝えることができず、申し訳ありませんでした。
ページが遷移しないのですが、お答えいただいた内容に書き換えてもダメでした。試しにSkillsComponent.vueを丸ごと（https://www.ritolab.com/entry/171）こちらに書かれているSampleComponent.vueに置き換えてみたところ、表示はされますが、カウンターは無反応です。データの受け渡し云々の前に、<script></script>内のmethodsが機能していないようなのですが、もし何かお分かりになれば教えていただきたいです。

Answer 1

以前に作成したプロジェクトにて動作確認を行ったところ、component.vueは全て問題なく表示されるものの、イベントは全て発火しませんでした。そのため、該当のコード以外に問題があると判断し関連するファイルを探したところ、views-layouts-app.blade.phpのheadタグとbodyタグの両方でapp.jsを読みこんでしまっていました。bodyタグ内の記載を削除したところ、正常に動作しました。