Comment gérer les événements à l'aide d'Electron + Vue (SPA)

Je n'arrive pas à comprendre comment gérer les événements lorsque vous utilisez Vue avec Electron. Cela peut sembler stupide, mais j'ai passé du temps à lire les docs, tester les instances de Vue et les directives dans le navigateur qui fonctionne bien mais les mêmes principes ne fonctionneront pas dans mon application électronique (c'est tellement différent de Php OOP). J'utilise la plaque chauffante electron-vue, je l'installe, elle fonctionne comme un charme.Comment gérer les événements à l'aide d'Electron + Vue (SPA)

Créé un modèle et un composant (TopMenu), maintenant je dois gérer l'événement clic des boutons de menu placés dans mon composant TopMenu, mais peu importe comment j'essayer, je reçois:

[Vue warn]: la propriété ou la méthode "say" n'est pas définie sur l'instance mais référencée pendant le rendu. Assurez-vous de de déclarer les propriétés de données réactives dans l'option de données. (trouvé dans le composant ) [Vue warn]: Le gestionnaire de l'événement "click" n'est pas défini.

./LandingPageView/TopMenu.vue:

<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>

Source

2016-10-06 Edmond Tamas

Bonjour, vous devez mettre les méthodes dans le même composant que le modèle:

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

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

un coup d'oeil dans les documents Vue: https://vuejs.org/v2/guide/

Source

2017-04-09 09:42:15 MhvDuran

Comment gérer les événements à l'aide d'Electron + Vue (SPA)

Répondre

Questions connexes