VueJS Component

by Alen Subasic

HTML

<div id="app">
  <p>
    {{ title }}
  </p>
  <hr>
  <app-user></app-user>
</div>

CSS

.user {
  border: 1px solid #ccc;
  background-color: white;
  padding: 10px;
}

JavaScript

Vue.component('app-user', {
  data: function() {
    return {
      "pathways": [{
          "PathwayID": "104.4",
          "Pathway": "Programming and Software Development",
          "DescriptionShort": "Design and write computer programs; design computer hardware; manage networks. ",
          "ClusterName": "Information Technology",
          "ResultRank": "1",
          "ResultPercent": "90",
          "ClassNameEn": "Information Technology"
        },
        {
          "PathwayID": "95.1",
          "Pathway": "Design/Pre-construction",
          "DescriptionShort": "Prepare detailed plans for the construction of buildings and other kinds of structures such as airports and bridges. ",
          "ClusterName": "Architecture and Construction",
          "ResultRank": "2",
          "ResultPercent": "85",
          "ClassNameEn": "Architecture and Construction"
        },
        {
          "PathwayID": "106.4",
          "Pathway": "Quality Assurance",
          "DescriptionShort": "Assure that whatever a company delivers is of good quality by selection of the materials used and constant testing. ",
          "ClusterName": "Manufacturing",
          "ResultRank": "3",
          "ResultPercent": "84",
          "ClassNameEn": "Manufacturing"
        },
        {
          "PathwayID": "104.3",
          "Pathway": "Web and Digital Communications ",
          "DescriptionShort": "Design and program Web sites and digital products; prepare their graphics, videos, images, and audio. ",
          "ClusterName": "Information Technology",
          "ResultRank": "4",
          "ResultPercent": "81",
          "ClassNameEn": "Information Technology"
        },
        {
          "PathwayID": "100.4",
          "Pathway": "Planning",
          "DescriptionShort": "Plan for the future of a specific town, city, or rural area. ",
          "ClusterName": "Government and Public Administration",
          "ResultRank": "5",
          "ResultPercent": "79",
         ...