关于如何执行类似操作，我有一个小问题：
我有2个组件（一个用于侧边栏，一个用于我的卡（引导卡））
卡组件直接从数据库在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"
}
]
}
您能给我一个提示或一个小例子来说明如何做类似的事情吗？
答案 0 :(得分：0)
您需要将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"组件的master div下。这样，您将可以更好地控制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（推荐）：
<!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>
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: '',
...
}
...