重新渲染子组件Vue

时间:2017-12-19 11:12:57

标签: javascript jquery ajax laravel vuejs2

我在使用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. &euro;{{$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 />

如果可以,请帮助我。

0 个答案:

没有答案