Question

我正在尝试根据所选内容显示所选li标签的内容。例如：如果用户单击颜色，则内容应显示所有颜色。否则，形状将显示所有形状。

以上仅是示例，但我想要实现的功能与此类似。我有2个苗条的组件。 SchemaNav.svelte基本上处理不同li项目之间的Tab功能。然后Table.svelte处理要显示内容的表。

SchemaNav.svelte

<script>
var list;
    export function onItemClick(names) {
         list = names.table_name; //to get the selected li value 
        return list;
    }

     
<script>
    {#if activeItem === "common"}
        <div class="content">
            <div class="tname">
                {#each name as names }
                    {#if names.table_schema === activeItem}
                        <ul>
                            <li on:click={() => onItemClick(names)}>
                            {names.table_name}</li>
                            
                        
                            
                        </ul>
                    {/if}
                {/each}
            </div>
            <Table  />
            
    </div>  
{/if}

Tables.svelte

<script>
import {onItemClick} from './SchemaNav.svelte';
</script>
            <table class="table table-bordered table-hover dt-responsive">
                <caption class="text-center">Column names</caption>
                    <thead>
                        <tr>
                            <th>Column Name</th>
                            <th>Data Type</th>
                        </tr>
                    </thead>
                    <tbody>
                    {#if {onItemClick} === info.table_name}
                    {#each info as item}
                        
                        <tr>
                            <td>{item.column_name}</td>
                            <td>{item.data_type}</td>
                        </tr>
                     
                    {/each}
                    {/if}
                    </tbody>
            </table>

我遇到的错误是：GET http：// localhost：3000 / client / undefined net :: ERR_ABORTED 404（未找到）（匿名）@ catalog：70

如何获取所选的Li物品以相应显示其内容...

Answer 1

我不确定您要做什么。我认为您应该使用REPL做一个非常简单的示例，这样您会得到更好的答案。

也许一种解决方案是：

将表KeyConditionExpression作为属性list，并在表<Table {list} />中。现在，您可以在table-comp中引用所选的export let list。

以下是REPL：
https://svelte.dev/repl/6c756e5f65784b1796dd92dd148c04da?version=3.24.1

您还可以为表格提供一个过滤列表，其中包含您需要显示的所有信息，然后您就无需在table-comp中进行任何处理，只需显示数据即可。

这是第二种解决方案的REPL：
https://svelte.dev/repl/5668cdee007c4418b13667350a589f80?version=3.24.1

导出函数返回未定义

1 个答案: