如何使用Electron + Vue(SPA)处理事件

z9smfwbn 于 2022-12-08 发布在 Electron

关注(0)|答案(1)|浏览(165)

我在使用Vue和Electron时遇到了一些问题，弄清楚如何处理事件。这可能看起来很愚蠢，但我已经花了时间阅读文档，测试Vue示例和浏览器中的指令，它们工作正常，但同样的原理在我的电子桌面应用程序中不起作用（这与PHP OOP有很大不同）。
我使用electron-vue样板文件，设置它，工作起来很有魅力。创建了一个模板和一个组件（TopMenu），现在我需要处理放置到我的TopMenu组件中的菜单按钮的单击事件，但无论我如何尝试，我都得到：
[Vue warn]：属性或方法“say”未在示例上定义，但在呈现期间被引用。请确保在data选项中声明React数据属性。（在组件中找到）[Vue warn]：未定义事件“click”的处理程序。
./平台页面视图/顶部菜单.版本：

<template>
  <div>
    <button type="button" name="button" v-on:click="say">BUTTON</button>
  </div>
</template>

main.js:

import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'

import App from './App'
import routes from './routes'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true

const router = new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes
})

/* eslint-disable no-new */
new Vue({
  methods: {
    say: function () {
      alert()
    }
  },
  router,
  ...App
}).$mount('#app')

App.vue:

<style>
  @import url(https://fonts.googleapis.com/css?family=Lato:400,700);

  * {
    margin: 0;
    padding: 0;
  }

  html,
  body { height: 100%; }

  body {
    align-items: center;
    background:
      radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(229, 229, 229, .85) 100%
      );
    background-position: center;
    font-family: Lato, Helvetica, sans-serif;
  }
</style>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
  import store from 'src/vuex/store'

  export default {
    store
  }
</script>

index.ejs:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- webpack builds are automatically injected -->
  </body>
</html>

electron

来源：https://stackoverflow.com/questions/39900378/how-to-handle-events-using-electron-vue-spa

1条答案

按热度按时间

azpvetkf1#

你好，你需要把方法放在模板的同一个组件中：

<template>
  <div class="example" @click="say">say method</div>
</template>

<script>
  export default {
    methods: {
      say () {
        console.log('Hello world!')
      }
    }
  }
</script>

查看vue文档：https://v2.vuejs.org/v2/guide/

赞(0）回复(0）举报 2022-12-08

我来回答

如何使用Electron + Vue(SPA)处理事件

1条答案

相关问题

热门标签

最新问答