How to place vue variable inside a laravel bracket

Question

I am having problem displaying the vue variable output when using it together with laravel. Below is my code.

<input type="text" 
               class="form-control search-bar__input" 
               placeholder="Search Courses, Interests, Schools or Institutions" 
               autocomplete="on" 
               autofocus="on"
               v-model="query"
               v-on:keyup="search">
<ul class="list-group">
    <li class="list-group-item" v-for="course in courses">
        <a href="{{ route('courses.show', '{{ course.id }}') }}">@{{ course.title }}</a>
    </li>
</ul> 

In the above code I make used of @{{course.id}} inside the route in the a element. However it seems it is not working. Can anyone help me on this.

Answer 1

You're mixing up server side and client side code there. You're passing @{{course.id}} as a parameter to a PHP function, so you'll probably be getting a syntax error.

You should use Laravel to output your route and then in your HTML/Blade you can output a Vue variable using the @{{ }} syntax.

<a href="{{ route('courses.show') }}?course_id=@{{ course.id }}">@{{ course.title }}</a>

That will generate a URL like http://yourdomain.com/courses/path/ and stick ?course_id= on the end of it.

My guess is that you're trying to use a route with a parameter in it, rather than a query string. In which case, you should try something like this (Not tested):

<a href="{{ route('courses.show', '') }}/@{{ course.id }}">@{{ course.title }}</a>

Note that I have put quotes ' around the second parameter to route and I have omitted the @ since we're hoping to directly output {{ course.id }} and we're in PHP, not Blade.

With any luck your URL will be generated as something like this:

http://yourdomain.com/courses/path/{{ course.id }}