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

Question

I'm new to vuejs and I'm trying to build a simple single file component for testing purpose.

This component simply displays a bool and a button that change the bool value. It also listen for a "customEvent" that also changes the bool value

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

<script>    
  ipcRenderer.on('customEvent', () => {
    console.log('event received');
    this.mybool = !this.mybool;
  });


  export default {
    data() {
      return {
        mybool: true,
      };
    },
    methods: {
      test: () => {
        console.log(mybool);
        mybool = !mybool;
      },
    },
  };
</script>

The button works fine. when I click on it the value changes. but when I receive my event, the 'event received' is displayed in the console but my bool doesn't change.

Is there a way to access the components data from my code?

Thanks and regards, Eric

tony19 · Accepted Answer · 2022-07-15 00:42:24Z

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

edited Jul 15, 2022 at 0:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 18, 2017 at 8:43

choasia

10.9k6 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Over a year ago

Thanks! moved it to beforeMount() {...} worked like a charm!

choasia Over a year ago

@Eric Very glad it helped you :D

Vamsi Krishna · Accepted Answer · 2017-08-18 08:49:22Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related