Вопросы Теги

Скрыть элементы карты в Vue

Вот мое исполнение .... 

function get_time_difference(earlierDate, laterDate) 
{
    var oDiff = new Object();

    //  Calculate Differences
    //  -------------------------------------------------------------------  //
    var nTotalDiff = laterDate.getTime() - earlierDate.getTime();

    oDiff.days = Math.floor(nTotalDiff / 1000 / 60 / 60 / 24);
    nTotalDiff -= oDiff.days * 1000 * 60 * 60 * 24;

    oDiff.hours = Math.floor(nTotalDiff / 1000 / 60 / 60);
    nTotalDiff -= oDiff.hours * 1000 * 60 * 60;

    oDiff.minutes = Math.floor(nTotalDiff / 1000 / 60);
    nTotalDiff -= oDiff.minutes * 1000 * 60;

    oDiff.seconds = Math.floor(nTotalDiff / 1000);
    //  -------------------------------------------------------------------  //

    //  Format Duration
    //  -------------------------------------------------------------------  //
    //  Format Hours
    var hourtext = '00';
    if (oDiff.days > 0){ hourtext = String(oDiff.days);}
    if (hourtext.length == 1){hourtext = '0' + hourtext};

    //  Format Minutes
    var mintext = '00';
    if (oDiff.minutes > 0){ mintext = String(oDiff.minutes);}
    if (mintext.length == 1) { mintext = '0' + mintext };

    //  Format Seconds
    var sectext = '00';
    if (oDiff.seconds > 0) { sectext = String(oDiff.seconds); }
    if (sectext.length == 1) { sectext = '0' + sectext };

    //  Set Duration
    var sDuration = hourtext + ':' + mintext + ':' + sectext;
    oDiff.duration = sDuration;
    //  -------------------------------------------------------------------  //

    return oDiff;
}
0
задан n1ghty 29 January 2019 в 12:10
поделиться

1 ответ

Вам нужно внести свой код app.js в блейд-файл, иначе вы не сможете получить доступ к полям данных. Получив код app.js, создайте поле data sCat: ''. Затем в вашем card-component используйте оператор if, чтобы увидеть, равна ли текущая категория sCat или sCat нулю. Например: 

<card-component title={{$data->title}} description={{$data->description}} category={{$data->category}} v-if="(sCat == {{$data->category}} || sCat === '')"></card-component>

Лучше было бы создать компонент master и поместить все, что у вас есть, под div id="app", в компоненте master. Таким образом, вы будете лучше контролировать свои коды Vue.

РЕДАКТИРОВАТЬ

Подход 1: 

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@include('includes.header')
<body>
    <div id="app" class="wrapper">
        <nav-component></nav-component>
        <header-component></header-component>
        <header-sidebar-component></header-sidebar-component>
            <div class = "container">
            <div class="row">
            @foreach ($sortedData as $data)
                    <card-component title={{$data->title}} description={{$data->description}} category={{$data->category}}></card-component v-if="(sCat == {{$data->category}} || sCat === '')">
            @endforeach
            </div>
            </div>
    </div>
    <script src="/js/app.js"></script>
    //Move your vue instance from app.js to here as below
    <script>
        new Vue({
            el: "#app",
            data: {
                sCat: '',
                ...
            }
            ....
        });
    </script
</body>
</html>

Подход 2 (рекомендуется):

welcome.blade.php 

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@include('includes.header')
<body>
    <div id="app" class="wrapper">
        <master card-items="{{ $data }}">
    </div>
    <script src="/js/app.js"></script>
</body>
</html>

Мастер. Vue 

template
    <nav-component></nav-component>
    <header-component></header-component>
    <header-sidebar-component></header-sidebar-component>
    <div class = "container">
        <div class="row">
            <div class="col-x-y" v-for="item in items"> //add some column values if needed or use plain div
                <card-component :title="item->title" :description="item->description" :category="item->category" v-show="(sCat === item->category || sCat === '')"></card-component>
        </div>
    </div>
script
    import NavComponent from 'pathToNavComponent.js';
    //import other components
    props: {
        items: Array
    }
    components: {
        NavComponent,
        ... //other components imported
    }
    data: {
        sCat: '',
        ...
    }
    ...
0
ответ дан pkimtani 29 January 2019 в 12:10
поделиться
Другие вопросы по тегам:

Похожие вопросы: