[Vuejs]-Petite-Vue on-click missing in compiled html, and "not defined" for reactive properties in app

by

3👍

✅

Event handlers don’t appear in rendered DOM HTML as there is nothing in the HTML spec that supports them, so that’s expected. Vue specific syntax like that gets stripped away and turned into JavaScript when it’s compiled for the browser.

Your issue is that you’re using normal Vue Options API which petite-vue doesn’t support. Read carefully through the documentation and example code. You’ll see there is no data(), methods, etc. options.

Your app should be written as:

createApp({
  showText: false,
  toggleText() {
    this.showText = !this.showText;
  }
}).mount('#app');

jsfiddle

Note I removed the hidden-text class on the div element because display: none would always hide the text regardless of the v-if result.

👤yoduh

Leave a comment