javascript - 如何在带有电子的 vue.js 中使用两个 @click $emit 函数

Question

我正在开发与 SSHFS 驱动器连接的登录页面。

并且一些功能正在工作，但是我对我的代码感到困惑。我分析了我的代码，但我不知道它为什么会起作用，以及为什么会起作用。

我的应用程序看起来像这样。

这只是使用 Electron 的简单登录 Web 应用程序。因此，当我单击登录并且 ID 和密码正确时，它将挂载 SSHFS 驱动器并转到系统托盘图标隐藏。之后，它应该打开安装文件夹的资源管理器。

所以我想当我点击登录按钮时，两个带有 $emit 函数的 @click 应该像这样工作。

      <div class="form-item">
      <button class="login" v-show="showConnectButton" :class="{ 'success': isConnected, 'connecting-disconnecting': isConnectingOrDisconnecting }" :disabled="isConnectingOrDisconnecting" @click="[$emit(isConnected ? 'disconnect' : 'connect', conn), $emit('open', conn.mountPoint)]">{{isConnected ? 'disconnect' : 'login'}}</button>
      </div>

我使用此代码，但似乎代码尝试提前安装驱动器然后 $emit(isConnected) 函数，因此它显示了我在另一个代码中设置的无法找到“E”驱动器的错误。

'系统在我的计算机中找不到'E'驱动器'是一个错误

我试图将挂载功能放到另一个功能上，但它不起作用。只有“隐藏到托盘”和“安装驱动器功能”运作良好。所以我认为它应该只修复一些代码并且它会工作，但我不知道我应该在哪里修复代码。

而且我已经在 stackoverflow 问题中进行了搜索，但似乎不适合我的问题。这是我完整代码的一部分。请检查代码并给我一些建议。谢谢。

我的 ConnectionItem.vue 完整代码

<template>
  <div class="item">
      <div class="form-item">
      <button class="login" v-show="showConnectButton" :class="{ 'success': isConnected, 'connecting-disconnecting': isConnectingOrDisconnecting }" :disabled="isConnectingOrDisconnecting" @click="[$emit(isConnected ? 'disconnect' : 'connect', conn)]">{{isConnected ? 'disconnect' : 'login'}}</button>
      </div>
  </div>
</template>

<script>
import { remote } from 'electron'
import Icon from '@/components/Icon'

const window = remote.getCurrentWindow()

export default {
  name: 'connection-item',

  components: {
    Icon
  },

  props: {
    conn: {
      type: Object,
      required: true
    },

    mode: {
      type: String,
      required: false,
      default: 'none'
    }
  },

  computed: {

    isConnected (conn) {
      // this.isActive = !this.enable
      this.$emit('open', conn.mountPoint)
      window.hide()
      return this.conn.status === 'connected'
    },

    isConnectingOrDisconnecting () {
      return this.conn.status === 'connecting' || this.conn.status === 'disconnecting'
    },

    showConnectButton () {
      // window.hide()
      // openLocal(path);
      // this.$emit('open', conn.mountPoint)
      return this.mode === 'none' || this.isConnected || this.isConnectingOrDisconnecting
    },

    isEditing () {
      return this.mode === 'edit' && !this.isConnected && !this.isConnectingOrDisconnecting
    },

    showDeleteButton () {
      return this.mode === 'delete' && !this.isConnected && !this.isConnectingOrDisconnecting
    },

    showRunningInBackgroundNotification () {
      if (!this.runningInBackgroundNotificationShowed) {
        if (this.$store.state.Settings.settings.displayTrayMessageOnClose) {
          this.notify('program runs in background (network connected)') // 1
          this.notify('Click Quit button when you disconnect drive') // 2

          this.runningInBackgroundNotificationShowed = true
        }
      }
    }
  }
}
</script>

标签： javascriptvue.jselectron