ratiw / vue-table

data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
MIT License
1.83k stars 303 forks source link

templates not returning html , browserify / laravel #129

Open pfzwaan opened 7 years ago

pfzwaan commented 7 years ago
require('./bootstrap');
var Vue = require('vue/dist/vue');
//https://jsfiddle.net/matfish2/f5h8xwgn/
var VueTables = require('vue-tables-2');
Vue.use(VueTables.client, {
    compileTemplates: true,
    // highlightMatches: true,
    // pagination: {
    //     dropdown:true,
    //     chunk:5
    // },
    filterByColumn: true,
    texts: {
        filter: "Search:"
    },
    datepickerOptions: {
        showDropdowns: true
    }
});

const app = new Vue({
    el: '#app',
    data: {
        columns: ['id', 'name', 'age', 'edit', 'erase'],
        tableData: [
            {id: 1, name: "John", age: "22"},
            {id: 2, name: "Jane", age: "24"},
            {id: 3, name: "Susan", age: "16"},
            {id: 4, name: "Chris", age: "55"},
            {id: 5, name: "Dan", age: "40"}
        ],
        options: {
            headings: {
                id: 'ID',
                name: 'Naam',
                age: 'Leeftijd',
                edit: 'Edit',
                erase: 'Verwijderen',
            },
            templates: {
                edit: function (h,row) {
                    return `<a href='#!/${row.id}/edit'><i class='glyphicon glyphicon-edit'></i></a>`
                },
                erase: function(h, row) {
                    return `<delete id=${row.id}></delete>`
                }
            }
        }
    }
});

the templates returning plaintex, no idea why?

my gulp file:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');
/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */
elixir.ready(function() {
    elixir.config.js.browserify.transformers
        .find(transformer => transformer.name === 'babelify')
        .options.plugins = [
        'babel-plugin-transform-vue-jsx'
    ];
}) 

elixir(function(mix) {
    mix.sass('app.scss');
    mix.browserify('main.js');
});
ratiw commented 7 years ago

@pfzwaan I think you might have to refer to this instead.