我在使用inline-template
属性的刀片文件中有一个vue组件。在该组件的脚本中,我进行了一次AJAX调用来过滤一些结果。这只返回纯HTML,我可以在刀片文件中再次显示。我遇到的问题是子组件不会在这个HTML中呈现,就像加载页面时一样。所以,我希望有一种方法可以在我的AJAX调用之后激活这些子组件的渲染,因为现在我的vue组件在执行AJAX调用之后是不可见的。
JS在Vue父模板中(刀片中的内联模板)
$('.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();
}
}
});
});
刀片文件
<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>
我想重新呈现的组件是<Favorite>
和<ReviewStars />
如果可以,请帮助我。