title: Dynamically button and page generation in VueJS
body: <p>I have a JSON file that feeds data from the backend and into a table (Bootstrap-Vue built in). In that table I want to have VueJS create a button that would be generated under a specific condition and if clicked would then generate a new page with additional details.</p>
  
  <p>Here is a sample of the JSON output:</p>
  
  <pre><code>{"driver_id":2,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"58","driver_trailer":"37","driver_status":"sleeping","has_violations":true},
  </code></pre>
  
  <p>So if "has_violations" is true, then the button would be generated that onclick would request additional data from the backend via JSON and then generate a new page based on that data.</p>
  
  <p>So sort of the vanilla js equivalent of <code>event.target.closest('tr').dataset.userId</code></p>
  
  <p>But how can I do this in VueJS?</p>
  
  <p><strong>Edited in Table Code (Per Request):</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;b-container fluid&gt;
  
      &lt;!--Search Controls--&gt;
      &lt;b-row&gt;
        &lt;b-col md="6" class="my-1"&gt;
          &lt;b-form-group horizontal label="Filter" class="mb-0"&gt;
            &lt;b-input-group&gt;
              &lt;b-form-input v-model="filter" placeholder="Type to Search" /&gt;
              &lt;b-input-group-append&gt;
                &lt;b-btn :disabled="!filter" @click="filter = ''"&gt;Clear&lt;/b-btn&gt;
              &lt;/b-input-group-append&gt;
            &lt;/b-input-group&gt;
          &lt;/b-form-group&gt;
        &lt;/b-col&gt;
        &lt;b-col md="6" class="my-1"&gt;
          &lt;b-form-group horizontal label="Sort" class="mb-0"&gt;
            &lt;b-input-group&gt;
              &lt;b-form-select v-model="sortBy" :options="sortOptions"&gt;
                &lt;option slot="first" :value="null"&gt;-- none --&lt;/option&gt;
              &lt;/b-form-select&gt;
              &lt;b-form-select :disabled="!sortBy" v-model="sortDesc" slot="append"&gt;
                &lt;option :value="false"&gt;Asc&lt;/option&gt;
                &lt;option :value="true"&gt;Desc&lt;/option&gt;
              &lt;/b-form-select&gt;
            &lt;/b-input-group&gt;
          &lt;/b-form-group&gt;
        &lt;/b-col&gt;
        &lt;b-col md="6" class="my-1"&gt;
          &lt;b-form-group horizontal label="Sort direction" class="mb-0"&gt;
            &lt;b-input-group&gt;
              &lt;b-form-select v-model="sortDirection" slot="append"&gt;
                &lt;option value="asc"&gt;Asc&lt;/option&gt;
                &lt;option value="desc"&gt;Desc&lt;/option&gt;
                &lt;option value="last"&gt;Last&lt;/option&gt;
              &lt;/b-form-select&gt;
            &lt;/b-input-group&gt;
          &lt;/b-form-group&gt;
        &lt;/b-col&gt;
        &lt;b-col md="6" class="my-1"&gt;
          &lt;b-form-group horizontal label="Per page" class="mb-0"&gt;
            &lt;b-form-select :options="pageOptions" v-model="perPage" /&gt;
          &lt;/b-form-group&gt;
        &lt;/b-col&gt;
      &lt;/b-row&gt;
      &lt;!--Search Controls--&gt;
  
      &lt;!-- Main table element --&gt;
      &lt;b-table show-empty
               stacked="md"
               :items="items"
               :fields="fields"
               :current-page="currentPage"
               :per-page="perPage"
               :filter="filter"
               :sort-by.sync="sortBy"
               :sort-desc.sync="sortDesc"
               :sort-direction="sortDirection"
               @filtered="onFiltered"
      &gt;
        &lt;template slot="driverName" slot-scope="row"&gt;{{row.value.driver_first_name}} {{row.value.driver_last_name}}&lt;/template&gt;
        &lt;template slot="truckNumber" slot-scope="row"&gt;{{row.value.driver_truck}}&lt;/template&gt;
        &lt;template slot="truckNumber" slot-scope="row"&gt;{{row.value.driver_trailer}}&lt;/template&gt;
        &lt;template slot="status" slot-scope="row"&gt;{{row.value.driver_status}}&lt;/template&gt;
        &lt;template slot="violations" slot-scope="row"&gt;{{row.value?'Yes':'No'}}&lt;/template&gt;
        &lt;template slot="actions" slot-scope="row"&gt;
          &lt;router-link :to="{name: 'driver_violations_list'}"&gt;
            &lt;b-button id="driverLogs"&gt;View Driver Logs&lt;/b-button&gt;
          &lt;/router-link&gt;
        &lt;/template&gt;
  
      &lt;/b-table&gt;
  
      &lt;b-row&gt;
        &lt;b-col md="6" class="my-1"&gt;
          &lt;b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" /&gt;
        &lt;/b-col&gt;
      &lt;/b-row&gt;
  
    &lt;/b-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    data () {
      return {
        items: items,
        fields: [
          { key: 'driver_name', label: 'Driver Name', sortable: true, sortDirection: 'desc' },
          { key: 'truck_number', label: 'Truck Number', sortable: true, 'class': 'text-center' },
          { key: 'trailer_number', label: 'Trailer Number', sortable: true, 'class': 'text-center' },
          { key: 'has_violations', label: 'Violations' },
          { key: 'driver_status', label: 'Status' },
          { key: 'actions', label: 'Actions' }
        ],
        currentPage: 1,
        perPage: 5,
        totalRows: items.length,
        pageOptions: [ 5, 10, 15 ],
        sortBy: null,
        sortDesc: false,
        sortDirection: 'asc',
        filter: null,
      }
    },
    computed: {
      sortOptions () {
        return this.fields
          .filter(f =&gt; f.sortable)
          .map(f =&gt; { return { text: f.label, value: f.key } })
      }
    },
    methods: {
      onFiltered (filteredItems) {
        // Trigger pagination to update the number of buttons/pages due to filtering
        this.totalRows = filteredItems.length
        this.currentPage = 1
      }
      //Get JSON
      getDriverStatus: function () {
        const url = 'driver_status_data.json'
          axios.get(url, {
            dataType: 'json',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            mode: 'no-cors',
            credentials: 'include'
          })
          .then(function (response) {
            console.log(JSON.stringify(response.data))
            this.courses = JSON.stringify(response.data)
          })
          .catch(function (error) {
            console.log(error)
          })
        }
    }
  }
  &lt;/script&gt;
  </code></pre>