Question

我在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>
                @endforeach
                </div>
                </div>
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>

还有Vue组件

<template>
    <div class="col-md-4">
        <div class="card text-white bg-primary" style="width: 18rem;">
        <img class="card-img-top" src="/img/card1.jpg" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title" v-text=title></h5>
            <h6 class="card-subtitle mb-2 text-muted" v-text=category></h6>
            <p class="card-text" v-text=description></p>
        </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['title', 'description', 'category']
}
</script>

我想将其转换并使用v-for渲染它，以便我可以获取要在父级内部进行过滤的数据。

如何转换为转换为父级和子级组件

0 个答案: