Function 如何使用我的内嵌按钮和Svelte调用onClick函数？

按钮加载到正确的列中，我正在尝试为它们添加功能。只需将onClick添加到调用函数saveMe（）的第一个按钮，我就得到了saveMe未定义的错误。有人能看出我做错了什么吗

我试过几种方法来让它工作。hrefs、getElementById，甚至按钮中的一个简单警报，但没有任何效果，否则我会出错

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script>
import { beforeUpdate, createEventDispatcher, onMount, shared } from 'svelte';
import Fuse from 'fuse.js';
import { writable } from 'svelte/store';
import { produce } from 'immer';
//import {saveMe} from './newlocal.js';
//console.log('saveme', saveMe);
//alert({saveMe})
//const testmsg = newlocal.saveMe(test);
let buttons = '<div class="btn-group style="width:100%"><button style="width:33.3%" type="button" onClick="saveMe()"><i class="fa fa-floppy-o"></i></button style="width:33.3%"><button style="width:33.3%"><i class="fa fa-rebel"></i></button><button style="width:33.3%"><i class="fa fa-print"></i></button></div>';

export let faketable = [{Color:'BLUE', Car:'Camaro', Brand:'Chevy', Action:buttons, ID: 1},
{Color:'RED', Car:'Pinto', Brand:'Ford', Action:buttons, ID: 2},
{Color:'Gray', Car:'Gremlin', Brand:'Chevy', Action:buttons, ID: 3},
{Color:'White', Car:'Maverick', Brand:'Ford', Action:buttons, ID: 4},
{Color:'Yellow', Car:'Beetle', Brand:'Volkswagen', Action:buttons, ID: 5},
{Color:'Black', Car:'Batmobile', Brand:'Wayne Enterprises', Action:buttons, ID: 6},
{Color:'Pewter', Car:'Silverado', Brand:'Chevy', Action:buttons, ID: 7},
{Color:'Yucky', Car:'F-150', Brand:'Ford', Action:buttons, ID: 8},
{Color:'Navy Blue', Car:'911', Brand:'Porsche', Action:buttons,ID: 9},
{Color:'Cherry Red', Car:'Diablo', Brand:'Lamborghini', Action:buttons, ID: 10},
{Color:'Black', Car:'Sporster', Brand:'Harley Davidson', Action:buttons, ID: 11},
{Color:'Orange', Car:'Viper', Brand:'Dodge', Action:buttons, ID: 12}                
];

export let len = faketable.length;
console.log("len", len)

export let columns = ["Color", "Car", "Brand", "Action"];

export let apagetable = [];

export let clickable = true

export let currentPerPage = 10;
export let perPageOptions = [10, 20, 30, 40, 50];
export let currentPage = 1;
export let defaultpage = 1;

export let exactSearch = false; 

export let newpages = parseInt(len / currentPerPage);
console.log('newpages', newpages)

export let sortType = 'asc';

let tr;

export let x;
export let z;

const dispatch = createEventDispatcher();

export function click(row) {
    console.log('click', row);
        if (!clickable) {
            return;
        }
        if (getSelection().toString()) {
            // Return if some text is selected instead of firing the row-click event.
            return;
        }
        dispatch('row-click', row);
}

document.getElementById("saveme");
console.log('document', document);
function saveMe(){
    console.log('saveme');
    alert('I have been saved!');
}

export function sort(index) {
        if (index > -1) {
            setSortIcon(index);
            getPaged({colName: columns[index].field, direction: sortType});             
        }
}   

onMount(() => {
    calcPage(defaultpage);
});

$: selectedPage = selected + 1;

export function calcPage(defaultpage){
    x = parseInt(len / currentPerPage); 
    z = len % currentPerPage;
    apagetable = [];
    var temptable = [];
    var i = 0;  
    if (len > currentPerPage){
        if (z != 0){
            x += 1;
    }
    }

    for (i = 0 + (currentPerPage * (defaultpage - 1)); i < currentPerPage * defaultpage; ){
        if (!faketable[i]){
            break;
        }
        temptable.push(faketable[i]);   
        i++;
    }
    apagetable = temptable;
    return apagetable;
}

function getNext(){
    defaultpage += 1;
    if (defaultpage >= x){
        defaultpage = x;
    }
    calcPage(defaultpage);
}

function getPrev(){
    defaultpage -= 1;
    if (defaultpage <= 0){
        defaultpage = 1;
    }
    calcPage(defaultpage);
}

function getPageAmount(){   
    currentPerPage = perPageOptions;
    calcPage(defaultpage); 
    perPageOptions = [10, 20, 30, 40, 50]; 
}

</script>

<div>
        <table ref="table" class="table" style="width:100%" cellspacing="0" cellpadding="0">
            <thead>
                <tr>                    
                    {#each columns as column, x}    
                    <th style="width: { column.width ? column.width : 'auto' }" align="center"> 
                    {column}
                    </th>                       
                    {/each}                 
                </tr>
            </thead>
            <tbody>
                {#each apagetable as row}       
                <tr class="{ clickable ? 'clickable' : '' }" on:click="{() => click(row)}">
                    {#each columns as column, x}
                    <td align="center">                 
                        {@html row[column]}
                    </td> 
                    {/each}                 
                </tr>
                {/each}
            </tbody>
        </table>
    <button style="right;"><i class="material-icons" on:click="{getPrev}">chevron_left</i></button><button style="float: right;"><i class="material-icons" on:click="{getNext}">chevron_right</i></button> 
    <div class="table-footer">
        <div class="datatable-length">
            <label>
                <span>Rows per page:</span>
                <select bind:value="{perPageOptions}" on:change="{getPageAmount}">      
                    {#each perPageOptions as option} 
                        <option value={option}>  
                        {option}
                        </option>
                    {/each}
                </select>               
            </label>
        </div>
        <div class="datatable-info">
            {(currentPage - 1) * currentPerPage ? (currentPage - 1) * currentPerPage : 1}
                - {currentPerPage} of {len} 
        </div>
    </div>

</div>

<style> 

    tr.clickable {
        cursor: pointer;
    }   

    table {
        table-layout: fixed;
    } 

  table tr td {
        padding: 0 0 0;
        height: 50px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.87);
        border-bottom: solid 1px #DDDDDD;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;        
        border: 1px solid #dddddd;
        text-align: center;     
    }   

    table th {
    border-radius: 0;
        text-align: center;
    }
    table tbody tr:hover {
        background-color: #EEE;
    }
</style>

从“svelte”导入{beforeUpdate、createEventDispatcher、onMount、shared}；
从“Fuse.js”导入Fuse；
从'svelte/store'导入{writable}；
从“immer”导入{product}；
//从“./newlocal.js”导入{saveMe}；
//console.log（'saveme'，saveme）；
//警报（{saveMe}）
//const testmsg=newlocal.saveMe（测试）；
让按钮='单击（行）}“>
{#每列作为列，x}
{@html行[列]}
{/每个}
{/每个}
雪佛龙左雪佛龙右
每页行数：
{#每个页面选项作为选项}
{option}
{/每个}
{（当前页-1）*当前页？（当前页-1）*当前页：1}
-{len}中的{currentPerPage}
可点击{
光标：指针；
}   
桌子{
表布局：固定；
} 
表tr td{
填充：0；
高度：50px；
字体大小：13px；
颜色：rgba（0,0,0,0.87）；
边框底部：实心1px#DDDDDD；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
边框：1px实心#dddddd；
文本对齐：居中；
}   
表th{
边界半径：0；
文本对齐：居中；
}
表tbody tr：悬停{
背景色：#EEE；
}

---

我只是尝试获取基本功能，以便在执行操作时向按钮添加更具体的细节。但在本例中，单击“保存”按钮后，我希望收到一条警告，提示“我已保存！”。

在Svelte中有两种处理单击的方法：

内联：

让selectedTabIndex=0；

具有以下功能：

导出let hidden=false；
功能切换部分可视性（事件）{
隐藏=！隐藏；
}

谢谢您的回复，但这些示例对我正在尝试的工作不起作用。我的标记是一个字符串，我使用@html对其进行格式化。我以前尝试过这个方法，但我收到错误或根本没有响应。@j_w________________________________________定购为html。@j_w_d您试图做的事情可能是不可能的，因为Svelte需要解析标记以将其转换为JavaScript函数，该函数更新了DOM以使反应性工作。我认为你们两人可能都是对的，除非有更新让我们这样做；这只是现在不可行。我可以让它使用“iframe”，但“iframe”的功能有限，无法满足我的需求。如果有人发现了这一点，那将非常棒，但现在我必须尝试其他功能。谢谢！

    <script>
      let selectedTabIndex = 0;
    </script>

    <li class:is-active={selectedTabIndex === 0}>
      <a href="#" on:click={() => (selectedTabIndex = 0)}>Tab 1</a>

<script>

  export let hidden = false;
  function toggleSectionVisiblity(event) {
    hidden = !hidden;
  }
</script>

<a href="#" on:click={toggleSectionVisiblity}>Show / hide</a>