英文:
Petite-Vue on-click missing in compiled html, and "not defined" for reactive properties in app
问题
我尝试使用v-if来切换div的可见性，以创建一个“假”多页面网站。然而，我遇到了两个问题：
首先，<a href="#" v-on:click="toggleText">click to toggle</a> 编译为 <a href="#">click to toggle</a>。同样，当我使用div而不是a href时，它也无法被点击。
其次，即使我将div切换为按钮，我仍然收到一个错误消息“showText未定义”，但我在app对象中定义了ShowText作为一个响应式属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Petite-Vue Example</title>
<style>
.hidden-text {
display: none;
}
</style>
</head>
<body>
<div id="app">
<button class="clickable" @click="toggleText">Click me!</button>
<div v-if="showText" class="hidden-text">Hidden text revealed!</div>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module'
const app = {
showText: false,
toggleText() {
this.showText = !this.showText;
}
};
createApp({
data() {
return app;
},
methods: {
toggleText: app.toggleText
}
}).mount('#app');
</script>
</body>
</html>
希望这些指针对你有帮助！
英文:
I am trying to create a "fake" multi-page website by toggling div visibility using v-if. However I am running into two issues:
First <a href="#" v-on:click="toggleText">click to toggle</a> is being compiled to <a href="#">click to toggle</a>. Same when using div instead of a href, and then it can not be clicked.
Secondly, even if I switch the div to a button I keep getting an error "showText is not defined", but I define ShowText as a reactive property in the app object?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Petite-Vue Example</title>
<style>
.hidden-text {
display: none;
}
</style>
</head>
<body>
<div id="app">
<button class="clickable" @click="toggleText">Click me!</button>
<div v-if="showText" class="hidden-text">Hidden text revealed!</div>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module'
const app = {
showText: false,
toggleText() {
this.showText = !this.showText;
}
};
createApp({
data() {
return app;
},
methods: {
toggleText: app.toggleText
}
}).mount('#app');
</script>
</body>
</html>
Any pointers would be appreciated!
答案1
得分: 3
以下是翻译好的内容：
事件处理程序不会出现在渲染后的 DOM HTML 中，因为 HTML 规范中没有支持它们，所以这是预期的。像这样的 Vue 特定语法在编译为浏览器时会被剥离并转换为 JavaScript。
您的问题在于您正在使用普通的 Vue Options API，而 petite-vue 不支持它。请仔细阅读文档和示例代码。您会看到没有 data()、methods 等选项。
您的应用应该写成：
createApp({
showText: false,
toggleText() {
this.showText = !this.showText;
}
}).mount('#app');
请注意，我已经从 div 元素中删除了 hidden-text 类，因为display: none 会始终隐藏文本，不管 v-if 的结果如何。
英文:
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');
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论