[Vuejs]-Vuejs single file component (.vue) model update inside the <script> tag

by

1👍

✅

You can move ipcRenderer.on(...) into vuejs’s lifecycle hooks like created.
See: https://v2.vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

👤choasia

1👍

You are setting up the event listener outside of the component’s options which you export by using

export default{ //... options }

Set up the event listener inside the vue options so the vue instance has control over it, in your case modifying dara property

As choasia suggested move the event listener to `created() life cycle hook:

<template>
  {{ mybool }}
  <button v-on:click="test">test</button>
</template>

<script>    



  export default {
    data() {
      return {
        mybool: true,
      };
    },
    methods: {
      test: () => {
        console.log(mybool);
        mybool = !mybool;
      },
    },
    created(){
        ipcRenderer.on('customEvent', () => {
            console.log('event received');
            this.mybool = !this.mybool;
        });
    }
  };
</script>

Now you component will starting listening for that particular even when the component is created

👤Vamsi Krishna

Leave a comment