Vue.js 2 Web Development Projects

Indicators

We will create a separate component for the dashboard indicators, as follows:

1. In the components folder, create a new ProductionIndicator.vue component.
2. Declare a template that displays a progress bar, a title, and additional info text:

      <template>        <div class="production-indicator">          <loading-progress :progress="value" />          <div class="title">{{ title }}</div>          <div class="info">{{ info }}</div>        </div>      </template>

3. Add the value, title, and info props:

      <script>      export default {        props: {          value: {            type: Number,            required: true,          },          title: String,          info: [String, Number],        },      }      </script>

4. Back in our ProductionDashboard component, let's compute the average of the values and the rate of errors:

      computed: {        length () { return this.measures.length ...