Как я могу обновить индикатор выполнения при изменении данных JSON с помощью vue.js без обновления - PullRequest
Новая
       17

Как я могу обновить индикатор выполнения при изменении данных JSON с помощью vue.js без обновления

1 голос
/ 26 июня 2019

Я пытаюсь создать страницу панели надстроек для отслеживания состояния моего приложения Python, запущенного на сервере.

На стороне сервера приложение python обновляет файл data.json при достижении определенного состояния. На стороне клиента vue.js обрабатывает создание контента.

У меня проблема при попытке обновить индикатор выполнения, потому что мне нужно обновить страницу, чтобы отображался прогресс.

Есть ли у вас какие-либо предложения, как сделать индикатор прогресса в моем представлении без обновления?

index.html 

<div class="item" v-for="item in order">>
    <div class="progress">
        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" :style="{ width: item.completion + '%' }">
        </div>
    </div>
</div>

app.js 

window.addEventListener('load', () => {

    window.vue = new Vue({
        el: '#app',
        name: 'Order',
        data: {
            isLoading: true,
            order: [],
        },

                created() {
                    fetch('./data.json')
                    .then((res) => { return res.json() })
                    .then((res) => {
                    this.isLoading = false;
                    this.order = res.order;
                })
            }
        })

});

data.json 

{
    "order": [
        {
            "customer": "Mr. Smith",
            "price": "60",
            "status": "Pending",
            "orders": "Something",
            "completion": 40,
            "isAvailable": true,
            "isEligible": true
    }
    ]
}

edit: я решил проблему с добавлением watcher в app.js 

            watch: {
                order() {
                    this.updateorder();
                }
            },
            methods: {
                updateorder() {
                    fetch('./data.json?_timestamp=' + Date.now())
                    .then((res) => { return res.json() })
                    .then((res) => {
                    this.order = res.order;
                    })

1 Ответ

0 голосов
/ 26 июня 2019

Помогает ли? 

let i = 0;
const emulateRequest = () => Promise.resolve({
  "order": [
    {
      "customer": "Mr. Smith",
      "price": "60",
      "status": "Pending",
      "orders": "Something",
      "completion": i++,
      "isAvailable": true,
      "isEligible": true
    }
  ]
});

new Vue({
  el: '#app',
  data: () => ({
    isLoading: true,
    order: [],
  }),
  created() {
    this.load();
  },
  methods: {
    load() {
      //fetch('./data.json')
      //  .then((res) => { return res.json() })
      emulateRequest()
        .then((res) => {
          this.isLoading = false;
          this.order = res.order;

          if (this.order.some(({ completion }) => completion !== 100)) {
            setTimeout(() => {
              this.load();
            }, 1000);
          }
        })
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div id="app">
<div class="item" v-for="item in order">
    <div class="progress">
        <div class="progress-bar bg-warning" role="progressbar" :aria-valuenow="item.completion" aria-valuemin="0" aria-valuemax="100" :style="{ width: `${item.completion}%` }">
        </div>
    </div>
</div>
</div>
...