在 Vue 中隐藏卡片元素

Question

我有一个关于如何做这样的事情的小问题：我有 2 个组件（一个用于侧边栏，一个用于我的卡片（Bootstrap 卡片））卡片组件直接从数据库中在 foreach 循环中呈现。有 3 个属性：title、description 和 category。现在我希望侧边栏过滤该类别并通过 Vue 动态显示所有或仅显示一个类别。但我真的不知道怎么办。我是 Vue 的新手。我想我应该使用 onclick 方法，但如何查找正确的目录。

welcome.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    @include('includes.header')
    <body>
        <div id="app" class="wrapper">
            @include('includes.nav')
            @include('includes.headerPicture')
            <!--@include('includes.headerSidebar')-->
            <cards></<cards>
            @include('includes.footer')
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>

和CardComponent

<template>
    <div class="container">
        <div class="row">
            <div class="container sidebar-container">
            <ul class="nav justify-content-center nav-tabs">
                <li class="nav-item">
                    <a class="nav-link" href="/" style="color:white">Alle</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/livingspaces" style="color:white">Wohnraum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/therapies" style="color:white">Therapien</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/news" style="color:white">News</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/achievements" style="color:white">Erfolge</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/events" style="color:white">Events</a>
                </li>
            </ul>
            </div>
            <div class="card" style="width: 18rem;" v-for="card in cards">
            <img src="/img/card2.jpg" class="card-img-top">
                <div class="card-body">
                    <h5 class="card-title">{{card.title}}</h5>
                    <p class="card-text">{{card.text}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            card: {
                title: '',
                description: '',
                category: '',
                text: ''
            },
            cards: [],
            validationErrors: '',
            uri: 'http://localhost:8000/cards/',
            isHidden: true
        }
    },

    methods: {
        loadCards() {
            axios.get(this.uri).then(response=>{
                this.cards = response.data.sortedData;
                this.loading=true;
            })
        }
    },
    mounted() {
        this.loadCards();
    }
}
</script>
<style>
.sidebar-container {
    padding-bottom: 2em;
}
</style>

JSON数据：

{
sortedData: [
{
id: 1,
title: "Test2222",
description: "Test",
text: "Test",
category: "achievement",
created_at: "2019-01-17 15:56:14",
updated_at: "2019-01-25 12:25:26"
},
{
id: 2,
title: "TestView",
description: "asd",
text: "asd",
category: "achievements",
created_at: "2019-01-18 12:06:40",
updated_at: "2019-01-18 12:06:40"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Testr",
category: "news",
created_at: "2019-01-16 16:05:51",
updated_at: "2019-01-16 16:05:51"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Test",
category: "livingspaces",
created_at: "2019-01-16 16:31:53",
updated_at: "2019-01-16 16:31:53"
},
{
id: 2,
title: "Test",
description: "Test",
text: "Test",
category: "livingspaces",
created_at: "2019-01-17 15:55:48",
updated_at: "2019-01-17 15:55:48"
},
{
id: 3,
title: "Test",
description: "asdsadsadsadsadsdsdsadasdasdasdsadasdadsadsadasdsasadasdsadsadasdsads",
text: "Tesst",
category: "achievement",
created_at: "2019-01-28 15:15:20",
updated_at: "2019-01-28 15:15:20"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Test",
category: "events",
created_at: "2019-01-16 16:43:05",
updated_at: "2019-01-16 16:43:05"
},
{
id: 1,
title: "Test",
description: "Test",
text: "Test",
category: "therapien",
created_at: "2019-01-16 16:42:35",
updated_at: "2019-01-16 16:42:35"
},
{
id: 2,
title: "TestFinal",
description: "Test",
text: "Test",
category: "therapies",
created_at: "2019-01-18 12:20:17",
updated_at: "2019-01-18 12:20:17"
}
]
}

你能给我一个提示或一个小例子来说明如何做这样的事情吗？

Answer 1

您需要将 app.js 代码放入 blade 文件中，否则您将无法访问数据字段。获得 app.js 代码后，创建一个 data 字段 sCat: ''。然后在您的 card-component 中使用 if 语句来查看当前类别是否等于 sCat 或 sCat 是否等于 null。例如：

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

更好的方法是创建一个 master 组件，然后将 id="app" div 下的所有内容放入 master 组件中。这样你就可以更好地控制你的vue代码。

编辑

方法一：

<!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>

Master.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: '',
        ...
    }
    ...

在 Vue 中隐藏卡片元素

Hide Card Elements in Vue

vuejs2

vue-component

laravel-5.7

vue-filter

编辑

welcome.blade.php

Master.vue