I have a vue component in a blade file that is using the inline-template
property. In the script of that component I do a AJAX call to filter some of the results. This is returning just pure HTML that I can display again in the blade file. The problem I got with this is that the child components are not rendered in this HTML, like they do when you load the page. So, I would like to have a way to activate the render of these child components after my AJAX call, because now my vue components aren't visible after doing the AJAX call.
JS in Vue parent template (inline-template in blade)
$('.filter-select').on('change', function () {
var row = $('#row');
var capacity = $('#capacity').val();
var price = $('#price').val();
var type = $('#type').val();
var license = $('#license').val();
var token = $(this).data('token');
$.ajax({
url: 'indexFilters',
type: 'GET',
data: {
_token: token,
capacity: capacity,
price: price,
type: type,
license: license
},
success: function (data) {
console.log(data);
if(data) {
row.fadeOut("slow", function () {
row.html(data);
//re-render child components here
});
row.fadeIn()
}else {
row().fadeOut();
}
}
});
});
Blade file
<Overview inline-template>
<div class="row" id="row">
<div class="col-md-12">
@if($boats)
@forelse($boats as $boat)
<article class="adv">
<div class="row">
<div class="col-sm-4">
<div class="adv-image">
<a href="{{ route('advertisements.show',$boat->id) }}">
<img src="{{asset($boat->media->first()->filename)}}"class="img-responsive adv-image" alt="advertisment">
</a>
@if(Auth::user())
<Favorite inline-template id="{{ Auth::user()->id }}" boat="{{ $boat->id }}" favoriet="{{ Auth::user()->favorites->contains($boat->id) }}" v-cloak>
<i class="fa favorite" :class="favoritedClasses" alt="Favorite this" @click="toggleFavorite()"></i>
</Favorite>
@endif
</div>
</div>
<div class="col-sm-8">
<div class="adv-content">
<h2><a href="{{ route('advertisements.show',$boat->id) }}">{{ $boat->name }}</a></h2>
<i class="ion-ios-location brand marker"></i>
<h3 class="brand">{{$boat->location}}</h3>
<h4><strong>Maximaal</strong> <br/> {{$boat->capacity}} personen</h4>
<h4><strong>Vaarbewijs nodig</strong> <br/> {{$boat->license}}</h4>
<h4><strong>Beschrijving</strong> <br/> {{ str_limit($boat->description, $limit = 50, $end = '..') }}</h4>
<div class="info price">
<p>v.a. €{{$boat->price}}</p>
</div>
<div class="info user">
<p>{{$boat->user->firstname}} {{$boat->user->lastname}}</p>
@if($boat->user->avatar)
<img src="{{asset($boat->user->avatar->filename)}}" class="img-responsive img-user">
@else
<img src="{{asset('img/content-website/no-user-image.png')}}" class="img-responsive img-user">
@endif
</div>
<ReviewStars rating="{{$boat->average}}" />
</div>
</div>
</div>
</article>
@empty
<div class="alert alert-info">Er zijn geen advertenties gevonden die overeenkomen met de
zoekopdracht
</div>
@endforelse
@else
<div class="alert alert-info">Er zijn geen advertenties gevonden die overeenkomen met de
zoekopdracht
</div>
@endif
</div>
</div>
</Overview>
The components I would like to re-render are <Favorite>
and <ReviewStars />
If you can please help me out.