導出 function 返回 undefined

Question

我試圖根據其內容顯示所選 li 標簽的內容。 例如：如果用戶點擊顏色，內容應該顯示所有colors。否則，形狀將顯示所有形狀。

以上只是一個例子，但我想要實現的是類似的東西。 我有 2 個苗條的組件。 SchemaNav.svelte 基本上處理不同 li 項之間的 Tab function。 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}   

表格.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 (Not Found) (anonymous) @ catalog:70

如何讓選定的 Li 項目相應地顯示其內容...

Answer 1

我不確定你想做什么。 我認為你應該用 REPL 做一個非常簡單的例子，然后你會得到更好的答案。

也許一種解決方案是：

為表組件提供list作為道具<Table {list} />並在表組件export let list 。 現在您在 table-comp 中有了對選定list的引用。

這是一個回復：
https://svelte.dev/repl/6c756e5f65784b1796dd92dd148c04da?version=3.24.1

您還可以為表格提供一個過濾列表，其中包括您需要顯示的所有信息，然后您不需要在表格組件中進行任何處理，只顯示數據。

這是第二種解決方案的 REPL：
https://svelte.dev/repl/5668cdee007c4418b13667350a589f80?version=3.24.1