<script>タグ内のVuejs単一ファイルコンポーネント（.vue）モデルの更新

Question

私はvuejsが新しく、テスト目的で単純な単一ファイルコンポーネントを構築しようとしています。

このコンポーネントは、boolとbool値を変更するボタンを表示します。 また、また

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

ボタンが正常に動作しますbool値を変更する「customEvent」を聞きます。それをクリックすると値が変わります。 私は自分のイベントを受け取ったとき、コンソールに 'イベントを受け取った'と表示されますが、私のブールは変更されません。

コードからコンポーネントデータにアクセスする方法はありますか？

おかげに関して、 エリック

Answer 1

あなたがcreatedようvuejsのライフサイクルフックにipcRenderer.on(...)を移動することができます。
参照：https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Answer 2

あなたはVUEインスタンスがそれを制御しているので、VUEオプション内のイベントリスナーを設定し

export default{ //... options } 

を使用してエクスポートするコンポーネントのオプションの外のイベントリスナーを設定しています

：、あなたのケースで

としてchoasiaは、イベントリスナー `作成する（）のライフサイクルフックを動かす提案ダラプロパティを変更

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

コンポーネントが作成されても、そのコンポーネントをリッスンし始めます。