How can we get compiled template work without .value

[jourdain]

Hi all,

I was wondering how I can make hand compiled template behave the same way as regular component.
What I mean is how can I remove the .value from the @click="count.value++" in CompKo while CompOk is working just fine without it. The code below is a simple example while my real use case rely on a computed property as template.

Thanks,

Seb

import { createApp, ref, h, compile } from "vue";

const CompOk = {
  setup() {
    const count = ref(0);
    return { count };
  },
  template: `
    <div>
      <button @click="count++">+</button>
      <button @click="count--">-</button>
      {{ count }}
    </div>
  `,
};

const CompKo = {
  setup() {
    const count = ref(0);
    const template = `
      <div>
        <button @click="count.value++">+</button>
        <button @click="count.value--">-</button>
        {{ count }}
      </div>    
    `;

    return () => h(compile(template), { count });
  },
};

const App = {
  components: { CompOk, CompKo },
  template: `
    <div style="display: flex; flex-direction: column;">
      <comp-ok />
      <comp-ko />
    </div>
  `,
};

createApp(App).mount("#app");

[jourdain]

The point here is to be able to write the template section in the same fashion regardless on how it get handled (dynamically compiled vs standard vue template)

[jourdain]

Sorry for cross-posting it but trying my luck on the forum here. I will keep both posts in sync if any answer show up.

[nimatrengo]

The difference is where you are rendering the template inside CompKo's setup method, whereas the CompOk setup is returning the count and then it will compile the ref variable without its value property to the template. if you want to fix this issue, you have to move the template from setup, outside of it in CompKo
https://vuejs.org/api/composition-api-setup.html#usage-with-render-functions

[jourdain]

Indeed, that is what I endup doing this weekend. Dynamically creating components and registering them to the app using the same setup function (returning the refs) and updating the template field based on the content available for it. Then if the template needed an update, I was re-registering it and invalidate the <component :is="dyna-comp" :key="template-tts" /> using its key to force a rebuild. I was about to post "my" solution but you beat me to it...

Thanks for getting back to me.