在Vue中隐藏卡元素
[英]Hide Card Elements in Vue
问题描述
I've got a little question on how to do something like that: I have 2 components (one for a Sidebar and one for my Cards (Bootstrap Cards)) The cards component gets rendered within a foreach loop directly from the database. 
我对如何执行类似操作有一个小问题：我有2个组件（一个用于侧边栏，一个用于我的Cards（引导卡）），cards组件直接从数据库中在foreach循环中呈现。 There are 3 attributes: title , description and category . 有3个属性： title ， description和category 。 Right now I want the sidebar to filter through that category and display all or only one category dynamically via Vue. 现在，我希望侧边栏可以过滤该类别并通过Vue动态显示所有或仅一个类别。 But I really don't know how. 但是我真的不知道如何。 I'm new to Vue. 我是Vue的新手。 I think I should use a onclick method but how to look for the right directory. 我认为我应该使用onclick方法，但是如何查找正确的目录。
welcome.blade.php 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>
And the CardComponent 和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 Data: 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"
}
]
}
Could you give me a hint or a little example on how to do something like that? 您能给我一个提示或一个小例子来说明如何做这样的事情吗？
1 个解决方案
解决方案1
0 已采纳 2019-01-17 18:51:59
You need to bring your app.js code in the blade file otherwise you can't access the data fields. 您需要将app.js代码放入刀片文件中，否则您将无法访问数据字段。 Once you get your app.js code, create a data field sCat: '' . 获得app.js代码后，创建一个data字段sCat: '' Then in your card-component use an if statement to see if the current category is equal to the sCat or sCat is equal to null. 然后在card-component使用if语句查看当前类别是否等于sCat或sCat等于null。 For ex: 例如：
<card-component title={{$data->title}} description={{$data->description}} category={{$data->category}} v-if="(sCat == {{$data->category}} || sCat === '')"></card-component>
A better approach would be to create a master component and put everything you have under the id="app" div, in the master component. 更好的方法是创建一个master成分，把你下的一切id="app"的div，在master成分。 This way you will have better control of your vue codes. 这样，您将可以更好地控制vue代码。
EDIT 编辑
Approach 1: 方法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>
Approach 2 (recommended): 方法2（推荐）：
welcome.blade.php 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 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: '',
...
}
...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.