You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using v-scope attribute, the functions defined on the prototype associated with the object are not found in the petite-vue scope, resulting in a "not found" error.
Here below a simple example that I have isolated:
<div v-scope="new Model1()">
<div>{{ value }}</div>
<button v-on:click="alsoIncValue()">Increment OK</button>
<button v-on:click="incValue()">Increment not OK = not found</button>
</div>
<div id="mounted-manually">
<div>{{ value }}</div>
<button v-on:click="alsoIncValue()">Increment OK</button>
<button v-on:click="incValue()">Also works here</button>
</div>
<script>
class Model1 {
constructor() {
this.value = "none";
this.alsoIncValue = function() {
this.value = this.value + "_2"
}; // NOT in prototype
}
incValue() {
this.value = this.value + "_1"; // in prototype
}
}
</script>
<script src="./lib/petite-vue/dist/petite-vue.iife.js" init></script>
<script>
const data = PetiteVue.reactive(new Model1());
let app = PetiteVue.createApp(data).mount("#mounted-manually");
</script>
-> simply paste the code in the body of an empty document and change the path for petite-vue.iife.js (copied from npm package distro version 0.4.0). Then open the page in a browser and display the debugger console.
Clicking on the "Increment not OK = ..." button produces a "not found" error, unlike all the other buttons.
Apparently, the v-scope attribute does not "bind" the functions in the object prototype but only the functions defined as direct properties ("alsoIncValue"). I suspected some limitations with the "reactive" function. So I manually made the object reactive and mounted manually the whole "thing" and.... everything worked fine. BTW, we also got the same behavior when using "old" function-style notation instead of "class" and adding inValue manually to prototype (I thought of some potential issues with the "new" notation...). Also, working with ESM modules did not change anything (I usually work with them).
I tried to use the debugger for stepping into petite-vue.iife.js code but since it is minified, it's useless... and the distro does not include a non minified version.
Question: Is this a feature "by design"? Or is this simply a bug?... Or did I miss something?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
When using v-scope attribute, the functions defined on the prototype associated with the object are not found in the petite-vue scope, resulting in a "not found" error.
Here below a simple example that I have isolated:
-> simply paste the code in the body of an empty document and change the path for petite-vue.iife.js (copied from npm package distro version 0.4.0). Then open the page in a browser and display the debugger console.
Clicking on the "Increment not OK = ..." button produces a "not found" error, unlike all the other buttons.
Apparently, the v-scope attribute does not "bind" the functions in the object prototype but only the functions defined as direct properties ("alsoIncValue"). I suspected some limitations with the "reactive" function. So I manually made the object reactive and mounted manually the whole "thing" and.... everything worked fine. BTW, we also got the same behavior when using "old" function-style notation instead of "class" and adding inValue manually to prototype (I thought of some potential issues with the "new" notation...). Also, working with ESM modules did not change anything (I usually work with them).
I tried to use the debugger for stepping into petite-vue.iife.js code but since it is minified, it's useless... and the distro does not include a non minified version.
Question: Is this a feature "by design"? Or is this simply a bug?... Or did I miss something?
Beta Was this translation helpful? Give feedback.
All reactions