Laravelとvue.jsでのログイン機能の実装について

Question

実装したい内容

Laravelとvue.jsを用いてログイン機能を実装したい。
現状、Laravelの標準機能を使用して、ログイン・アカウント登録機能までは実装完了している。
しかし、ログアウトができない。

現状

ログアウト機能を実装するために、POSTでroute('logouut')を送信してあげればログアウトは可能だが
vueファイル内で{{route('logouut')}}を記述するとエラーとなってしまう。

▼ ソース
Header.vue

<template>
  <b-navbar-nav class="navbar-nav-right ml-auto">
    <b-nav-item-dropdown right class="nav-profile">
      <b-dropdown-item class="preview-item">
        <a class="dropdown-item" href="#" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
          <i class="mdi mdi-logout mr-2 text-primary"></i> Signout
        </a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        </form>
      </b-dropdown-item>
    </b-nav-item-dropdown>
  </b-navbar-nav>
</template>

▼ エラー

Errors compiling template:

action="{{ route('logout') }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

解決したいこと

vueファイル内でlaravelの標準ログアウト機能を使用し、ログアウトをしたい。
laravel初心者になりますので的外れな質問になってしまっていたら申し訳ありません...

Answer 1

直接URL記載か、値を渡してあげるとかでは駄目ですか？

・直接記載

action="{{ route('logout') }}"
↓
action="/logout"

・bladeから値を渡す
LaravelのBladeにVueコンポーネントを組み込む
※上記ページの「endpoint」のような形

Comments

[aiko_1122]

直接URL記載での方法に切替えたらいけました！
ありがとうございます。