Прогрессбар на vue.js

Например можно реализовать как-то так (в примере на самом деле два прогрессбара). К сожалению всёж пока выходит сложнее для чтения и понимания чем «чистый» javascript+jquery

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
    <table id="hotels_list"></table>
    <div id="hotels_pager"></div>  
    <div id="app">
        <div class="container">
            <div class="row">
                    <div class="col-6">      
                        <persent v-bind:msg="pers1"></persent>
                    </div>
                    <div class="col-6">    
                        <persent v-bind:msg="pers2"></persent>
                    </div>                
            </div>    
        </div>                
    </div>
<script>    
Vue.component('persent', {
    props: ['msg'],
    template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'
});      
var app = new Vue({
  el: '#app',
  data: {
    timing: null,
    pers1 : {
        value: 10,
        txt:'Добавление новых',
        style:'width:20%'
    },
    pers2 : {
        value: 70,
        txt:'Обновление',
        style:'width:70%'
    }
  },
  mounted(){
    console.log("-загрузились полностью..");  
    this.runTiming();
  },
  methods: {
      runTiming() {
        this.timing = setInterval(this.changeCurrentPers, 2000)          
      },
      changeCurrentPers(){
         vl=this;
        $.post('progress.txt',{}, function(data){                          
                vl.pers1.value=data;
                vl.pers1.style='width:'+data+'%';
        });       
        $.post('progress_update.txt',{}, function(data){
                vl.pers2.value=data;
                vl.pers2.style='width:'+data+'%';
        });                 
      }
  },  
});

Всё ищу, гдеб его (VUE.js)  можно применить.. Пока выходит «надумано»..

Комментарии:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.