我正在使用 Vue 开发我的第一个应用程序，需要一些建议来尝试在按下标题中的按钮时打开面板。
我从一个基本的 HTML 模板开始，尝试在按下 header 中包含的按钮后添加交互性。
按下按钮时，我在控制台中收到以下消息:
vue.js:597 [Vue warn]: Invalid handler for event "click": got undefined
(found in )
我使用的代码如下:
HTML:
<!-- Doctype HTML5 -->
<!DOCTYPE html>
<html lang="en" />
<head>
<link rel="stylesheet" href="css/normalize.css">
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
<script src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-proj-info.js"></script>
</head>
<body>
<header>
<div class="h-branding">
<div id="h-nLogo">
<img src="img/med-logo-rev.png"height="70" />
</div>
<div id="h-title">
<h1>Executive Blueprint</h1>
<p class="subheader"><span class="tr-tier">Tier 1</span> - <span class="tr-service">Executive</span></p>
</div>
</div>
<div id="h-toggles">
<div class="buttonGroup">
<button type="" name="tier1">Tier 1</button>
<button type="" name="tier2">Tier 2</button>
<button type="" name="tier3">Tier 3</button>
</div>
<div class="buttonGroup">
<button type="" name="executive">Executive</button>
<button type="" name="concierge">Concierge</button>
</div>
</div>
<proj-slideout ref="proj-slideout" id="proj-slideout" :class="{ isOpen: isOpen }">></proj-slideout>
<div id="h-infoButton">
<div class="buttonGroup">
<button type="button" name="projInfo" class="proj-slideout-opener"
@click="open">Project Information</button>
</div>
</div>
</header>
JS:
Vue.component('proj-slideout', {
template: '#proj-slideout',
props: ['show'],
data: () => ({
isOpen: false,
projContent: 'overview' /* overview, jtbd, tiers, files */
}),
methods: {
close() {
this.isOpen = false;
},
open() {
this.isOpen = true;
console.log('Open Panel');
}
}
});
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: 'header'
})
});
SCSS:
#proj-slideout {
position: fixed;
top: 0;
right: 0;
width: 90vw;
height: 100vh;
padding: 30px;
display: flex;
flex-direction: row;
background-color: white;
transform: translateX(-100%);
transition: transform 0.6s ease(out-cubic);
display: none;
&.isOpen {
transform: translateX(0);
}
任何建议都会有帮助!
最佳答案
在您的代码中，@click="open" 引用了 Vue 父组件范围，因此您应该在中定义 isOpen 和 open父Vue组件
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: 'header',
data: () => ({
isOpen: false,
}),
methods: {
close() {
this.isOpen = false;
},
open() {
this.isOpen = true;
console.log('Open Panel');
}
}
})
});
关于javascript - 如何使用 vue.js 在按下按钮时打开侧面板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52574078/