how to update dom when changes to useSignal value in qwik?

Question

The "console.log" outputs the updated values to console, which suggest that the changes actually have taken place... However the "li" list items are not showing up in the browser!?

Can you please help me to understand whats wrong?

Here is the component code:

export default component$(() => {
  const {
    content,
  } = newsData;

  const articleContent = useSignal<HTMLElement>();
  const sectionMenu = useSignal<{ id: string; title: string; level: string }[]>([]);

  const extractSegments = $(
    (content: HTMLElement) => {

      return [
        {
          "id": "functions-preview1",
          "title": "Functions Preview 1",
          "level": "l2"
        },
        {
          "id": "functions-preview2",
          "title": "Functions Preview 2",
          "level": "l2"
        }
      ];
    }
  );

  useVisibleTask$(async () => {
    const sec = await extractSegments(articleContent.value as HTMLElement);
    sectionMenu.value.push(...sec)
    console.log('sectionMenu.value: ', sectionMenu.value);
  });


  return (
    <div class="container">
      <article class="grid mb-15" ref={articleContent}>
        {content}
      </article>
      <ul>
        {sectionMenu.value.map(({ id, title, level }: any) => (
          <li key={id} class={level}>
            <a href={#${id}}>
              {title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
});

score 1 · Answer 1 · answered Jul 31 '23 at 13:09

1

I recommend changing the

selectoneMenu.value.push(...sec)

to

selectoneMenu.value = [...sectionMenu.value, ...sec]

answered Jul 31 '23 at 13:09

David Pino

23
4

i already tried this, it doesnt work either... i also tried these: - selectoneMenu.value = sec; - selectoneMenu.value = await extractSegments(articleContent.value as HTMLElement); The "selectoneMenu.value" is visible in the console log... just the DOM is not reflecting the changes!? – jhon dano Jul 31 '23 at 14:16

score 0 · Accepted Answer · answered Jul 31 '23 at 16:01

0

this code will solve your problem.

sectionMenu.value = [...sectionMenu.value, ...sec];

You need to change the array reference to trigger the UI update.

answered Jul 31 '23 at 16:01

Giorgio Boa

341
4

i already did this, unfortunatly its not resolving my issue. – jhon dano Jul 31 '23 at 17:04
1

Here you are, it's working https://stackblitz.com/edit/qwik-starter-qe7ufv?file=src%2Froutes%2Findex.tsx – Giorgio Boa Jul 31 '23 at 18:59
you are absolutely right... it works just fine like this! The issue must be somewhere else in my code then! – jhon dano Jul 31 '23 at 19:52

how to update dom when changes to useSignal value in qwik?

2 Answers2