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 // ;)
            }
        },

如何通过这样的方法解决vue绑定

1 个答案: