Open grillonbleu opened 1 year ago
There is more than one way to compile in vue.js. I tried a different approach and it worked, but it might be far different than you want. You might be able to refactor it to something useful. I changed the files main.js, ContentRender.vue and App.vue
https://codesandbox.io/s/pedantic-kowalevski-3d2jb7?file=/src/components/ContentRender.vue
I’m resorting to using compile() instead of the usual approach because the template is only known at runtime. It’s a Laravel+Inertia+Vite application where the users edit the template themselves. They’re stored and pulled from database.
In the full app, ContentRender receives its template as a prop, like this:
https://codesandbox.io/s/recursing-bell-gorsu5?file=/src/components/ContentRender.vue
I should have used my wording correctly. Still used a compiler but in a different way. I used the compileToFunction. To get it working your way using theimport { compile } from "vue"
perhaps the best way is to get the most simple working example of vue using a compiler. Perhaps there is a unit test already in this project you can use. Then build code around it until either the bug occurs where you can isolate it or the code is complete without errors. I will have a bash at it in a few hours time.
@toomsie Oh OK, you moved the runtime compilation to App.vue instead with a call to compileToFunction(). It’s not being called though, because render() isn’t. This is because you kept the template. If we remove the template, render() gets properly executed and I get this error: _vue.compileToFunction is not a function
https://codesandbox.io/s/romantic-dust-xf2ybz?file=/src/App.vue
I will tidy this up be as close to your original example. Truth is I barely know anything about vue.js
Thanks for having a look. Hopefully someone knowledgeable about vue will chime in as well.
Ok, I have created a hello world example of my own. Later today I will make it close to your example and hopefully I might even be able to tell you why the error happened. https://codesandbox.io/s/intelligent-sea-lwtdwy?file=/src/components/ContentRender.vue
The code looks like your code. But I am not sure if the template is indirectly compiled or not. via the const template = this.$options.template;
https://codesandbox.io/s/saturday-18-f7welb?file=/src/App.vue
This is fixed in Vue 3.3.0-alpha.4.
Very nice. I guess we should have tested the code in different versions 😒.
Vue version
3.2.45
Link to minimal reproduction
https://codesandbox.io/s/fervent-platform-8m2hlu?file=/src/components/ContentRender.vue
Steps to reproduce
I have a component whose template is compiled dynamically through the compile() function. The use case is an online vue-based IDE which gives a real time preview of edited fragments.
It works great so far, except for the following warning. I get it twice for every time the compiled template uses a component method:
[Vue warn]: Property undefined was accessed during render but is not defined on instance.
Here is a minimal component which triggers the issue:
It can be observed here: https://codesandbox.io/s/fervent-platform-8m2hlu?file=/src/components/ContentRender.vue
What is expected?
Execution with no warning is expected.
What is actually happening?
Following warning appears twice for every component method call:
[Vue warn]: Property undefined was accessed during render but is not defined on instance.
The method calls otherwise resolve successfully.
System Info
No response
Any additional comments?
No response