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

【问题标题】：How to open open a side panel upon a button press using vue.js?如何使用 vue.js 在按下按钮时打开侧面板？
【发布时间】：2019-03-05 13:23:26
【问题描述】：

我正在使用 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);
  }

任何建议都会有所帮助！

【问题讨论】：

你可以在 jsfiddle 中设置它吗？

标签： javascript vue.js

【解决方案1】：

您只需要使用v-show

在模板上，在您的组件标签中添加v-if 或v-show，如下所示：

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

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

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

现在，当您单击按钮时，它会将isOpen 设置为相反的值，如果为假，它将变为真，并且您的projContent 组件将显示，如果为真，它将设置为假，自动隐藏你的组件，你甚至不需要设置方法来完成工作，它直接在事件中设置。

不要忘记从您的 scss 中删除 display:none

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

【讨论】：

【解决方案2】：

在您的代码中，@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');
      }
    }
  })
});

【讨论】：