0

我的应用程序会自动更新 $content 值，而无需我单击按钮。我知道这是一个简单的问题，但我不知道为什么，我正在学习苗条。

App.svelte

<script>
    import { content } from './store.js';
    import Item from './Item.svelte';


    $content = [{ id:0,obj: "Fell free to browse any category on top." }];

    function addContent(value) {
        $content = [{ id:0,obj: value}]
    }
</script>
<li><button on:click={addContent("Home Page")}>Home</button></li>
<li><button on:click={addContent("Products Page")}>Products</button></li>

<div class="Content">
    <p>Fell free to browse any category on top.</p>
    {#each $content as item}
        <p><svelte:component this={Item} objAttributes={item} /></p>
    {/each}
</div>

store.js

import { writable } from 'svelte/store';
export let content = writable({});

Item.svelte

<script>
    import { fade } from 'svelte/transition';
    export let objAttributes = {};
    
</script>
<p transition:fade>
    {objAttributes.obj} 
    {#if objAttributes.otherattrib}<em>{objAttributes.otherattrib}</em>{/if}
</p>
4

1 回答 1

1

这是因为您的on:click事件定义错误。接受这样的on:click函数作为参数

<button on:click={functionGoesHere}>

或者，如果你想要它内联

<button on:click={() => { }>

在您的情况下发生的是您直接调用一个函数，然后单击按钮时将调用该函数的结果。您可以在此示例中看到：

<script>
  function createFn() {
    return () => console.log('logging this')
  }
</script>
<button on:click={createFn}>Click here</button>

在此示例中，该功能() => console.log('logging this')将附加到按钮上。

所以回到你的代码，这很容易通过使它成为一个函数而不是一个函数调用来解决：

<li><button on:click={() => addContent("Home Page")}>Home</button></li>
于 2021-02-20T22:59:04.300 回答