时间戳

首页 > 解决方案 > 在 Vue 中隐藏卡片元素

vuejs2 - 在 Vue 中隐藏卡片元素

问题描述

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

欢迎.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"
}
]
}

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

标签： vuejs2vue-componentlaravel-5.7vue-filter

解决方案

您需要将app.js代码放入刀片文件中，否则您将无法访问数据字段。获得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（推荐）：

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

推荐阅读