Laravel Blade Templating + Vue2 HTML Render

3

I have an application that uses Laravel 5.4 and in order to search for reactive records with AJAX I decided to use Vue 2.

The issue is that when rendering the information of Vue.js I get the classic and logical error of Laravel , which does not find the constant:

HTML:

<div class="container" id="app">
    <div class="row">
        <div class="col-md-6">
            <form method="GET" class="form" action="" id="search-ads" @submit.prevent="submitForm">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Buscar" v-model="term">
                   <select class="form-control" v-model="category">
                        <option value="" selected disabled>Categor&iacute;a</option>
                        @forelse(App\Category::all() as $category)
                        <option value="{!! $category->id !!}">{!! $category->name !!}</option>
                        @empty
                        <option value="" selected disabled>No hay categor&iacute;as</option>
                        @endforelse
                    </select>
              <span class="input-group-btn">
                <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
              </span>
            </div>
            </form>         
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <ul class="ads">
                <li v-for="ad in ads">
                    @{{ ad.id }} <-- Error
                </li>
            </ul>
        </div>
    </div>
</div>

JS:

$(document).ready(function() {
    var vm = new Vue({
        el: "#app",
        data: {
            term: "",
            category: "",
            ads: []
        },
        methods: {
            loadAds: function() {
                axios.get('{{ url('/api/get') }}', {
                    params: {
                        term: this.term,
                        category: this.category
                    }
                }).then(function(response) {
                    return response.data;
                }).catch(function(error) {
                    console.log('Error: ' + error);
                });
            },
            submitForm: function() {
                if(this.term != '' || this.category != '') {
                    this.loadAds();
                }
            }
        }
    });
});

Error:

I've tried how several sites say that with @{{ ad.id }} ignores the Laravel variable and it's true, but instead it shows pure HTML {{ ad.id }} and no value of Vue.js

Any suggestions to ignore the Blade syntax and show the Vue component or maybe a v- directive that allows you to display that content without using double braces?

    
asked by Maramal 28.07.2017 в 23:42
source

2 answers

1

I would think that it is not necessary to use jQuery and its $(document).ready(function() {........}); , Vue does not need to run, therefore you can eliminate that "wrapper".

As for Vue, the syntax is correct, I tried it with the same variables and everything works, even setting "dummy" values:

<li v-for="ad in ads">
    @{{ ad.id }}
</li>

The only thing that occurs to me is that you did not compile the assets with webpack once you made the modification.

    
answered by 29.07.2017 / 00:13
source
1

I would think that the jquery document ready line is too much for you, try without that line and let the javascript part start from:

var vm = new Vue ({ ...

In case you have not compiled the assets with webpack use:

npm install

With that you install the packages you need including vue and webpack, then to compile the assets:

npm run watch

Remember to add the vue script in case you do not have it added. Good luck

    
answered by 29.07.2017 в 07:02