Vuejs2 @click not working in blade foreach loop

Published 3 months ago by wick12c

First time Vue user, moderate in Laravel and good with PHP. A simple blade view containing compact data created by heavy DB queries. Using a foreach loop on the compact data will show one to several results depending on what the user has searched for. The foreach is fine and data is presented in typical blade view fashion. I want to introduce Vue2 and just starting with a simple button creating a @click event (eventually to just show a preloader (no AJAX at this point) to wait for the next page to load.

I am sure there are many ways to do this but this is just a simple understanding of the following:

Button contains:

<button @click="loadPropertyPage('test')">test</button>

Linked to app.js compiled using Laravel-mix:

import Vue from 'vue';


new Vue({

    el: '#root',

    methods: {

        loadPropertyPage(link) {
            alert('test');
        }

    }

})

Works fine.

However, in a blade foreach loop adding the same button does not work:

<table id="bootstrap-table" class="table">
                                <thead>
                                    <tr>
                                        <th data-field="rentalid" class="text-center">Rental ID</th>
                                        <th data-field="brand">Brand</th>
                                        <th data-field="rentalname">Rental Name</th>
                                        <th data-field="accountmanager">SF AM Name</th>
                                        <th data-field="companyname">Company Name</th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach($search_data as $results)

                                        <tr>
                                            <td class="text-center"> {{ $results->RentalNumber }} </td>
                                            <td> {{ $results->brandname }} </td>
                                            <td> {{ $results->RentalName }} </td>
                                            <td> {{ $results->AccountManagerName }} </td>
                                            <td> {{ $results->CompanyName }} </td>
                                            <td> <button @click="loadPropertyPage('{{ url('search/property/'.$results->ListingId) }}')" class="btn btn-round btn-info btn-sm">View Property</button> </td>
                                            <td> Another link</td>
                                        </tr>

                                    @endforeach

                                </tbody>
                            </table>

I have replaced the above button with the simple button above and will not work. but if you place the simple button outside of the foreach the button and alert will work.

I am using Laravel 5.6 on Mac OS X.

Just to clarify, not looking for workarounds, just the simple understanding (more education purposes) as to why a vue @click conflicts with a blade foreach loop.

Thank you!

wick12c

Also to note, there are no console errors

Please sign in or create an account to participate in this conversation.