Vue 2.0 Hello World

by Darren Jennings

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@kongponents/[email protected]/dist/KButton.umd.js"></script>
<script src="https://unpkg.com/@kongponents/[email protected]/dist/KTable.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>

<div id="app-2">
  <div>{{coolMessage}}</div>
  <cert-table></cert-table>
</div>

JavaScript

const BASE_URL = 'http://localhost:8000/admin'
	const CertificateList = Vue.component('cert-table', {
    template: `<k-table v-bind:options="tableOptions"></k-table>`,
    components: {
      KTable: KTable
    },
    data: function() {
      return {
        certificateResponseData: null
      }
    },
    computed: {
      tableOptions() {
        return {
          tableOptions: {
            headers: [{
                label: 'Common Name',
                key: 'commonName'
              },
              {
                label: 'Country',
                key: 'countryName'
              },
              {
                label: 'Expired',
                key: 'expired'
              },
              {
                label: 'Locality',
                key: 'localityName'
              },
              {
                label: 'Organiztion',
                key: 'organizationName'
              },
              {
                label: 'State/Province',
                key: 'stateOrProvinceName'
              },
              {
                key: 'actions',
                hideLabel: true
              }
            ],
            data: this.certificateResponseData
          }
        }
      }
    },
    mounted() {
      $.get(`${BASE_URL}/gm/ca_certs`, data => {
        this.certificateResponseData = data.data
      })
    }
  });

  new Vue({
    el: '#app-2',
    data: {
      coolMessage: 'Hello Certs',
    },
    components: {
      CertificateList
    }
  })