[Vuejs]-How to import template in vueJs

by

0👍

✅

Anyone coming through this post :
I recently had something similar but with Laravel 5.1.

1) define a component (eg. Grid.vue may be resource/assets/js/components/Grid.vue )

<template id="grid">
<table class="table">
    <thead>
    <tr>
        <th v-for="key in columns"
            @click="sortBy(key)"
            :class="{active: sortKey == key}">
            {{key | capitalize}}
      <span class="arrow"
            :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
      </span>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="
    entry in data
    | filterBy filterKey
    | orderBy rank sortOrders[rank]">
        <td v-for="key in columns">
            {{entry[key]}}
        </td>
    </tr>
    </tbody>
</table>


<script>
    // register the grid component
    export default {
        template: '#grid',
        props: {
            data: Array,
            columns: Array,
            filterKey: String
        },
        data: function () {
            var sortOrders = {};
            this.columns.forEach(function (key) {
                sortOrders[key] = 1
            });
            return {
                sortKey: '',
                sortOrders: sortOrders
            }
        },
        methods: {
            sortBy: function (key) {
                this.sortKey = key;
                this.sortOrders[key] = this.sortOrders[key] * -1
            }
        }
    };
</script>

2) In resource/assets/js/yourcustomvue.js

import Grid from './components/Grid.vue';
new Vue({
el: '#results',
components: {Grid},
data: {}
});

Leave a comment