weixin_33737134 2017-12-19 11:12 采纳率: 0%
浏览 165

重新渲染子组件Vue

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. &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>

The components I would like to re-render are <Favorite> and <ReviewStars />

If you can please help me out.

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 使用C#,asp.net读取Excel文件并保存到Oracle数据库
    • ¥15 C# datagridview 单元格显示进度及值
    • ¥15 thinkphp6配合social login单点登录问题
    • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
    • ¥15 如何在scanpy上做差异基因和通路富集?
    • ¥20 关于#硬件工程#的问题,请各位专家解答!
    • ¥15 关于#matlab#的问题:期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707,使系统具有较小的超调量
    • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
    • ¥30 截图中的mathematics程序转换成matlab
    • ¥15 动力学代码报错,维度不匹配