如何通过这样的方法解决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 // ;) 
      } 
     },