를 사용하는 방법 setInterval 에서 구성 요소 vue

정의에서 타이머 각 나의 진행,사용하는 값을 업데이트의 콘솔을 보여줍니다 상수의 값을 변경의 가치 보기 여전히 변경되지 않는,어떻게 할 수 있습니에서 타이머 값을 변경하 보기

Vue.component('my-progress', {
    template: '\
            <div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">\
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{height: pgvalue}">{{pgvalue}}\
                </div>\
            </div>\
        ',
    data : function(){  

        return {
            pgvalue : '50%',
            intervalid1:'',
        }
    },
    computed:{

        changes : {
            get : function(){
                return this.pgvalue;
            },
            set : function(v){
                this.pgvalue =  v;
            }
        }
    },
    mounted : function(){

        this.todo()     
    },
    beforeDestroy () {

       clearInterval(this.intervalid1)
    },
    methods : {

        todo : function(){          
            this.intervalid1 = setInterval(function(){
                this.changes = ((Math.random() * 100).toFixed(2))+'%';
                console.log (this.changes);
            }, 3000);
        }
    },
})

여기에 링크입니다: jsbin.com/safolom

Alexey
편집된 질문8일 8월 2018 в 4:45
프로그래밍
javascript vuejs2 vue-component
11일 4월 2017 в 1:50
아직 보기가 없습니다.
해결책

이가리키지 않을 Vue. 도

todo: function(){           
    this.intervalid1 = setInterval(function(){
        this.changes = ((Math.random() * 100).toFixed(2))+'%';
        console.log (this.changes);
    }.bind(this), 3000);
}

나 

todo: function(){  
    const self = this;          
    this.intervalid1 = setInterval(function(){
        self.changes = ((Math.random() * 100).toFixed(2))+'%';
        console.log (this.changes);
    }, 3000);
}

나

todo: function(){  
    this.intervalid1 = setInterval(() => {
        this.changes = ((Math.random() * 100).toFixed(2))+'%';
        console.log (this.changes);
    }, 3000);
}

시에 액세스하는 방법이 올바른이내부의 콜백?]1

Bert
편집된 답변22일 9월 2017 в 3:39
해설 (2)

이 예제:


Vue.component('my-progress-bar',{
    template:
`<div class="progress">
    <div
        class="progress-bar"
        role="progressbar"
        :style="'width: ' + percent+'%;'"
        :aria-valuenow="percent"
        aria-valuemin="0"
        aria-valuemax="100">
        {{ percent }}%
    </div>
</div>`,
    props: { percent: {default: 0} }
});

new Vue({
    el: '#app',
    data: {p: 50},
    created: function() {
        var self = this;
        setInterval(function() {
        if (self.p
해설 (0)