CODEWITHSUNDEEP
javascriptsvelte
henriquehbr
henriquehbr

Reputation: 1122

Passing multiple parameters on Svelte action

Accordingly to the Svelte documentation:

Actions are functions that are called when an element is created. They can return an object with a destroy method that is called after the element is unmounted

I want to pass multiple parameters to a Svelte action function, but only the last one is recogonized

DEMO

<script>
    function example(node, arg1, arg2) {
        // the node has been mounted in the DOM
        console.log(arg1, arg2) // Should display 'a b', but actually only displays 'b undefined'
        return {
            destroy() {
                // the node has been removed from the DOM
            }
        }
    }
</script>

<h1 use:example={'a', 'b'}>Hello World!</div>

Is there any viable solution that avoid the use of a single object as parameter?

<script>
    function example(node, arg) {
        // the node has been mounted in the DOM
        console.log(arg) // Returns a object with the arguments
        return {
            destroy() {
                // the node has been removed from the DOM
            }
        }
    }
</script>

<h1 use:example>Hello World!</div>

<!-- Passing parameters -->
<h1 use:example={{
    arg1: [50, 75, 100],
    arg2: true
}}>Works like a charm!</h1>

Upvotes: 4

Views: 3723

Answers (2)

Tholle
Tholle

Reputation: 112777

The content between {} can be any JavaScript expression, and when you write 'a', 'b' you are using the comma operator, so the value of the entire expression will be 'b'.

You could use an array instead.

Example (REPL)

<script>
  function example(node, [arg1, arg2]) {
    console.log(arg1, arg2)
    return {
      destroy() {
        // the node has been removed from the DOM
      }
    }
  }
</script>

<h1 use:example="{['a', 'b']}">Hello World!</h1>

Upvotes: 3

voscausa
voscausa

Reputation: 11706

You also can use an array.

Below a snippet of my code:

export function initMapDesc(mapMark) {

  // make the entry (obj) and the composed search regex reactive
  return (node, [obj, pRex]) => {
    // the node has been mounted in the DOM
    node.innerHTML = mapObj(node, obj, pRex, mapMark);

    return {
      update([obj, pRex]) {
        node.innerHTML = mapObj(node, obj, pRex, mapMark);
      },
      // destroy the node to clear the view (on session change)
      destroy() {
        node.innerHTML = '';
      }
    };
  };
};

This code renders an object into a table <td> node. The regex stream is used to search nodes and mark the search results.

The code below shows the call of the use function. A closure is used to pass an object to the use function and to receive the regex search results.

const mapMark = {         // mapMark Obj
  markedIds: [],          // marked result row ids 
  skipProps: ['kind', 'method', 'type', 'bic']
};
const mapper = initMapDesc(mapMark);

and in the HTML:

<td id="{key}" class="space-normal" use:mapper={[$norm.map[key], $pseudoRex]}></td>

I have submitted a proposal to allow object and class methods to be used in a use directive.

Upvotes: 2

Related Questions