このような方法でvueバインドを解決するには

Question

を参照してください。

data_aが変更された場合、getDataBが実行されます。

この問題を処理するにはどうすればよいですか？

<template> 
<div> 
    <div :data-a="data_a"> 
     demo show params A 
    </div> 
    <div :data-b="getDataB()"> 
     demo show params B 
    </div> 
</div> 
</template> 
<script> 
    export default { 
     data() { 
      return { 
       data_a: 0, 
       datas: [ 
        0, 1, 2, 3, 4 
       ] 
      } 
     }, 
     methods: { 
      getDataB() { 
       console.log('getDataB() called'); 
      } 
     }, 
     mounted() { 
      setInterval(function() { 
       this.data_a = parseInt(Math.floor(Math.random() * 10000000000)); 
      }.bind(this), 1000); 
     } 
    } 
</script> 

Answer 1

まず、ES6に切り替えてbindを避けてください。

mounted() { 
      setInterval(() => { 
       this.data_a = parseInt(Math.floor(Math.random() * 10000000000)); 
      }, 1000); 
     } 

そして、それを計算するためにgetDataBを変更します。

computed: { 
      dataB() { 
       // do something with data_a 
       console.log('calc based on this.data_a in progress...') 
       return this.data_a*2 // ;) 
      } 
     },