Question

我正在使用Vue开发我的第一个应用程序，并且需要一些建议，在按下标题中的按钮时尝试打开面板。

我从一个基本的HTML模板开始，在按下标题中包含的按钮之后尝试添加交互性。

按下按钮时，我在控制台中收到以下消息：

vue.js：597 [Vue警告]：事件“ click”的无效处理程序：得到了   未定义

（位于）

我正在使用的代码如下：

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);
  }

任何建议都会有所帮助！

Answer 1

在您的代码中，@click="open"是指Vue父组件的作用域，因此您应在父Vue组件中定义isOpen和open

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');
      }
    }
  })
});

Answer 2

您需要使用v-show

在模板上，在组件标签中像这样添加v-if或v-show：

<projContent v-show="isOpen" ... />

在触发按钮上，直接使用click事件将isOpen设置为false或true，如下所示：

<button @click="isOpen = !isOpen" ... >Project Information</button>//or even better @click="isOpen ^= 1"

现在，当您单击按钮时，会将isOpen设置为其相反的值，如果为false，它将变为true，并且您的projContent组件将显示，如果为true，则将其设置为false，会自动隐藏您的组件，您甚至无需设置方法即可完成工作，它是在事件中直接设置的。

别忘了从您的display:none中删除scss

如果您需要添加过渡动画，请点击链接“ Vue transitions”

如何使用vue.js在按下按钮时打开打开侧面板？

2 个答案: