vue-table
vue-table copied to clipboard
templates not returning html , browserify / laravel
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');
});
@pfzwaan I think you might have to refer to this instead.