CODEWITHSUNDEEP
svelte-3svelte-component
daniel.betts
daniel.betts

Reputation: 170

Svelte - pass use:action to component child

I'm new to Svelte and it is very likely I'm missing something here.

I'm using sveltestrap and svelte-spa-router. When I try creating a <Button> (from sveltestrap) and using the link action (from svelte-spa-router) like this:

<script>
  import { Button } from 'sveltestrap';
  import {link} from 'svelte-spa-router';
  let myLink = '/foo/bar';
 </script>
<Button use:link={myLink}>
  Click here
</Button>

I get the following error:

[!] (plugin svelte) ValidationError: Actions can only be applied to DOM elements, not components

My expectation was that somehow (??) the <Button> would 'pass down' the use:link to the child html node.

Is there a best practice for this type of situation?

Upvotes: 4

Views: 1127

Answers (1)

juliomalves
juliomalves

Reputation: 50278

Since you're using a button component, you might want to change your code to use push rather than link in the on:click event.

<script>
  import { Button } from 'sveltestrap';
  import { push } from 'svelte-spa-router';
  let myLink = '/foo/bar';
</script>

<Button on:click={() => push(myLink)}>
  Click here
</Button>

Upvotes: 3

Related Questions