[Vuejs]-Dynamically button and page generation in VueJS

by

0👍

✅

Use the table slots as documented here to conditionally render the button.

Here’s an example:

new Vue({
  el: '#app',
  computed: {
    driverName () {
      return this.driver ? `${this.driver.driver_name.driver_first_name} ${this.driver.driver_name.driver_last_name}` : 'N / A'
    }
  },
  methods: {
    showViolations (driver) {
      this.driver = driver
      
      this.loading = true

      // Simulate an async api call with setInterval and setTimeout
      
      let interval = setInterval(() => {
        this.progress += 10
      }, 250)
      
      setTimeout(() => {
        this.loading = false
        this.progress = 0
        clearInterval(interval)
      }, 2500)
    }
  },
  data () {
    return {
      progress: 0,
      driver: null,
      loading: false,
      violations: [
        'Violation 1',
        'Violation 2',
        'Violation 3'
      ],
      fields: {
        driver_id: {
          label: 'ID',
          sortable: true
        },
        first_name: {
          key: 'driver_name.driver_first_name',
          label: 'First Name',
          sortable: true
        },
        last_name: {
          key: 'driver_name.driver_last_name',
          label: 'Last Name',
          sortable: true
        },
        driver_truck: {
          label: 'Truck',
          sortable: true
        },
        driver_trailer: {
          label: 'Trailer',
          sortable: true
        },
        driver_status: {
          label: 'Status',
          sortable: true
        },
        has_violations: {
          label: 'Violations',
          sortable: true
        }
      },
      items: [
        {
          driver_id:2,
          driver_name: {
            driver_first_name: 'Bob',
            driver_last_name: 'Dole'
          },
          driver_truck: 58,
          driver_trailer: 37,
          driver_status: 'Sleeping',
          has_violations: true
        },
        {
          driver_id:3,
          driver_name: {
            driver_first_name: 'John',
            driver_last_name: 'Lennon'
          },
          driver_truck: 69,
          driver_trailer: 34,
          driver_status: 'Deep Sleeping',
          has_violations: false
        }
      ]
    }
  }
})
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :fields="fields" :items="items">
    <template slot="has_violations" slot-scope="data">
      <template v-if="data.item.has_violations">
        <b-button size="md" variant="primary" v-b-modal.violations @click="showViolations(data.item)">
            See Violations
        </b-button>
      </template>
    </template>
  </b-table>
  <b-modal id="violations" :title="`Violations By: ${driverName}`">
    <b-progress v-show="loading" :value="progress" :max="100" animated></b-progress>
    <p v-if="!loading" class="my-4" v-for="violation in violations" :key="violation">{{ violation }}</p>
  </b-modal>
</div>

Leave a comment