Svelte: Using reactive input in <script>

Question

I am looking to use a reactive value to filter an array used in a chart. I tried both a bind:value and on:change approach. Both succeeded in outputting the index needed, but I am trying to use that value upstream in the <script> because there is a lot of processing of that data once the correct array index is selected.

Is there any way to use a reactive value in the script?

<script>
    let arrayIndex = 1; 
    let data_1 = { count: "a" };
    let data_2 = { count: "b" };

    let data_agg = [data_1, data_2];
    let data_filter = data_agg[arrayIndex];
</script>

<h1>Filter</h1>
<select bind:value={arrayIndex}>
    <option value={0}>0</option>
    <option value={1}>1</option>
</select>

<h1>Array Index</h1>
{arrayIndex}

<h1>Filtered Data</h1>
{Object.values(data_filter)}

REPL

Changing the value below "Filtered Data" is basically what I'm trying to achieve.

Please include all the relevant code in the question in the future. — brunnerh
– brunnerh, Commented May 28, 2022 at 1:57

brunnerh · Accepted Answer · 2022-05-28 13:44:26Z

1

Just replace let/const declarations with $: to make them reactive, in this case:

$: data_filter = data_agg[arrayIndex]

This makes sure that the value is updated if either data_agg or arrayIndex is changed.

Top level values depending on reactive values should also be reactive, e.g.

$: data_filter = data_agg[arrayIndex];
$: data_mapped = data_filter.map(x => ...);

If only the end result is needed in e.g. the HTML template or event handlers, reactive statements can be combined into blocks or functions. For the above example this could be done:

$: data_mapped = (() => {
  const data_filter = data_agg[arrayIndex];
  return data_filter.map(x => ...);
})();

edited May 28, 2022 at 13:44

answered May 28, 2022 at 1:53

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user15167046 Over a year ago

Thanks for the response! Is there a way to then use data_filter in the script. This REPL is a better example of what I was trying to ask: Thanks for the response, I should have been more clear. The downstream filtering is better shown by this example: svelte.dev/repl/87ef5280dd154988a627d2f4e4f2bf9a?version=3.46.2 What you answered solves the example I provided perfectly, but I am trying to then use that updated data as index filter and process the data more. Hopefully the new REPL explains the problem better.

user15167046 Over a year ago

EDITING COMMENT: Thanks for the response! Is there a way to then use data_filter in the script. This REPL is a better example of what I was trying to ask: svelte.dev/repl/87ef5280dd154988a627d2f4e4f2bf9a?version=3.46.2 What you answered solves the example I provided perfectly, but I am trying to then use that updated data as index filter and process the data more. Hopefully the new REPL explains the problem better.

brunnerh Over a year ago

@user15167046: Reduce the code to a minimal reproducible example and ask a separate question. Find the source of the problem, isolate it. I will not read through heaps of superfluous code. data_filter can be used like any other read-only variable in the script.

user15167046 Over a year ago

Thanks again @H.B. Here is that example stripped down: svelte.dev/repl/93e9c1e371cf49c0a489db365869bee1?version=3.48.0 // let data = data_preprocess[0]; // This runs $: data = data_preprocess[arrayIndex] // This does not The key part of the code is above, lines 12 and 13. I find that that reactive value cannot be used like any other variable in the script.

Corrl Over a year ago

@user15167046 Check the following values if they depend on the reactive one and so need to be reactive as well - have a look at this REPL with comments

|

Collectives™ on Stack Overflow

Svelte: Using reactive input in <script>

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related