Vue.js

Basic Vue.js setup for demos

by Damian Dulisz

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<div id="app">
  <div>
    <button @click="selected = []">
      Empty/reset
    </button>
    <vue-multiselect v-model="selected" :options="availableFachs" track-by="value" :multiple="true" label="label" :hide-selected="true">
    </vue-multiselect>
  </div>
  <table v-if="filteredReports.length">
    <tr v-for="(report, id) in filteredReports">
      <td>{{ id }}</td><td>{{ report.reporttype }}</td><td>{{ report.reportname }}</td>
      <td>{{ report.tags.join(', ') }}</td>
    </tr>
  </table>
  <p v-else>
    No results...
  </p>
  <pre>{{selected}}</pre>
  <pre>{{availableReports}}</pre>
</div>

CSS

table {
  margin-top: 20px;
  width: 100%;
}

table td {
  border: 1px solid #888;
}

Babel + JSX

/* app instance */
const app = new Vue({
  el: '#app',
  components: {
	  VueMultiselect: VueMultiselect.Multiselect
  },
  data () {
  	return {
    	selected: [],
    	reportData: {
        configs: [
          { id: 1, reporttype: 'Zeugnis', reportname: 'Konfiguration KMEK', tags: ['KMEK', 'A'] },
          { id: 2, reporttype: 'Zeugnis', reportname: 'Konfiguration NZKJ', tags: ['NZKJ', 'B'] },
          { id: 3, reporttype: 'Other1', reportname: 'Konfiguration ABCD', tags: ['ABCD', 'C'] },
          { id: 4, reporttype: 'Other2', reportname: 'Konfiguration EFGH', tags: ['EFGH', 'D'] }
        ],
        filters: {
          reporttype: [
            { id: 'CyrstalReport', label: 'CyrstalReport' },
            { id: 'Zeugnis', label: 'Zeugnis' }
          ],
          fachOe: [ {
          	
          }]
        }
      }
    }
  },
  computed: {
  	availableFachs () {
   		return this.reportData.configs.map(t => {
      	return {
        	label: t.tags[0],
          value: t.tags[0]
        }
      })
    },
  	filteredReports () {
    	if (!this.selected.length) {
      	return this.reportData.configs
      }

    	return this.reportData.configs.filter(c => {
      	let tags = c.tags
        let selectedLabels = this.selected.map(s => s.label)
        
        return selectedLabels.some(l => tags.includes(l))
      })
    }
  }
})