Dynamically load data in component

[Tim]

Just wondering if this is the right way to do this in v7 by using $ref. When my page component is loaded, it shows a placeholder/preloader and fetches the data from tha API. When the data is available, the content is updated through reactive variable.

Example code:

<template>
  ${content.value ? $h`content.value` : $h`Loading....`}
</template>
<script>
    export default (props, { $ref }) => {

	let content = $ref(null);

	getData(myContent => { // Some custom ajax function
	  content.value = myContent
	});

	return $render;
    }
</script>

[deejay]

<template>
  <div class="page">
    <div class="page-content">
      <div class="block">
        <p>${content.value ? content.value : 'Loading'}</p>
        ${content.value ? $h`<p>${content.value}</p>` : $h`<p>Loading</p>`}
      </div>
    </div>
  </div>
</template>
<script>
export default (props, { $ref, $onMounted }) => {
  let content = $ref(null);
  $onMounted(() => 
    getData(value => 
      content.value = value
    );
  );
  return $render;
};
</script>

[Tim]

Thanks for the full example! Was just wondering if usage of $ref is required to allow for reactive rendering. Because for example the ‘buttons’ page in the kitchen sink doesn’t use it and still seems to be reactive, but I think this is done manually by calling $update();?

Sometimes I am strill struggling with my previous way of things, by using $setState and component data callback.

[deejay]

@Tim

this is done manually by calling $update();

yes