any existing solution for CRUD functionality? about vue-tables-2 HOT 3 CLOSED

There is no plan to add create/edit functionality. However, this should be relatively easy to implement using templates. For example, to make the title column editable, turn the title into an object:

{
  value:'Some title',
  editing:false
}

Then define the template:

  title: function(h, row) {

        if (!row.title.editing)
          return <span on-click={this.edit.bind(this, row)}>{row.title.value}</span>;

          return  <div>
         <input type='text' value={row.title.value}/>
          <button on-click={this.save.bind(this,row)}>Save</button>
        </div>;

    }

Edit and save methods:

methods:{
edit: function(row) {
    row.title.editing = true;
    return row;
},
save: function(row) {
  row.title.editing = false;
  // send ajax request to update the value
  return row;
}
}

from vue-tables-2.

Hello,

@matfish2 I have question related to your example. In vue file I have:

// ...
import show from './jsx/show.jsx'
// ...
columns: ['show']
// ...
templates: {
    ...
    show: show
}
// ...
methods: {
    show(row) {
        console.log('CLICK');
    },
}

show.jsx file:

export default function(h, row) {
    return <span on-click={this.show.bind(this, row)}>show</span>
}

I have error: this.show is undefined, when trying more attemps with on-click syntax I had errors:

• TypeError: o.fn is not a function.
• Tried change this with that - that is undefined.
• on-click={bus.$emit('id-selected', 1)} - o.fn is not a function`

I use webpack from Laravel 2.1.0-beta.22, all node packages are fresh re-installed. Previous vue version was 2.0.x, current is up to date: 2.1.8.
.babelrc

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

loaders in webpack config:

test: /\.jsx?$/,
loader: 'babel',
include: [
    path.resolve(__dirname + '/node_modules/vue-tables-2/'),
    path.resolve(__dirname + '/node_modules/vue-pagination-2/'),
    path.resolve(__dirname + '/resources/assets/js/app/pages/projects/jsx/')
]

Currently I don't have idea what is bad in my code.

from vue-tables-2.

Found my problem. Methods must be declared in root component.

from vue-tables-2.