0

I have a reactive variable list either ref or reactive

in a vue.Js project

and i create an app that depends on this list(reactive)

let list = ref(['item']);

let vNode = h(
  'ul',
  list.value.map((v, i) => { return h('li', { key: i }, v) })
);

let customApp = createApp(vNode);

customApp.mount('#trial')

when list changes the mounted component doesn't change, how can i make it dynamic and sync with list?

mod7ex
  • 874
  • 9
  • 27

1 Answers1

0

the problem was solved using a component not a vnode.

let list = ref(['item']);

const comp = defineComponent({
  setup() {
    const arr = computed(() => toastsList.value);

    // or use list.value directly
    return () => h('ul',arr.value.map((v, i) => { return h('li', { key: i }, v) }));
  },
});

createApp(comp).mount('#trial');
mod7ex
  • 874
  • 9
  • 27
  • I was experimenting, you can do like this too [code here on stackblitz](https://stackblitz.com/edit/dynamic-v-for-h-render-function?file=src%2Fmain.js&terminal=dev) – Namysh Apr 28 '22 at 17:29
  • It's the same idea (transforming the VNode into a component) – Namysh Apr 28 '22 at 17:30
  • @Namysh how to convert node to component ? – mod7ex Apr 28 '22 at 18:33
  • It's not really transforming VNode into component it's more using a VNode in the component my bad. If you just mount the VNode when you reactive variable will change Vue will not be able to re-render it as it's just a VNode. But if you provide a component, this one contains a `render` method and so Vue will be able to re-render it – Namysh Apr 28 '22 at 21:20