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ía</option>
@forelse(App\Category::all() as $category)
<option value="{!! $category->id !!}">{!! $category->name !!}</option>
@empty
<option value="" selected disabled>No hay categorí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();
}
}
}
});
});
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?