Comments (2)
Hello, thanks for the answer.
There are two easy ways to accomplish what you want:
- Use Vuex: use
commit
ordispatch
to trigger mutations or actions in your vuex store that will, for example, show a modal dialog form or redirect to some other page. - Use EventBus architecture: use the
Event Bus
(also known by other names) software architecture. Basically, you have some sort of object (can be a static class too) called EventBus that stores a keymapevent_name => handler[]
. Then, when some event happens (button click, for example), you call a functionemit
which pass the event name and a payload toEventBus
, which will then execute all handlers (a handler is basically a callback) stored in the handlers array.
Here is a quick draft, pseudocode, to illustrate EventBus
(i suggested it because i love it):
const EventBus = {
events: {}, // our map
// subscribe to an event
// passing a callback that will be executed when the event is triggered
subscribe(eventName, callback) {
if (this.events[eventName]) this.events[eventName].push(callback)
else this.events[eventName] = [callback]
},
// trigger handlers
emit(eventName, payload) {
let handlers = this.events[eventName]
if (handlers) handlers.forEach(f => f(payload))
}
}
Then, in your custom component, you could do:
import EventBus from './EventBus.js'
///
export default {
methods: {
// when user click the edit button, this get triggered
edit() {
let model = this.data
EventBus.emit('editModel', model)
}
},
props: {
data: Object
}
}
then, in some other component:
mounted() {
EventBus.subscribe('editModel', model => {
// some example code
this.model = model
this.showForm = true
})
}
A last notice, the actionButtons
property, as shown in demo01 and demo2, is no longer supported. Instead, you should pass a component
to the desirable column. If you want to use actionButtons
, you would have to use an older version of this plugin, and also see the past versions of the README
(Later, I'm going to create a website for this plugin and separate the documentation by version)
I hope this was helpful
from vue-data-table.
I believe what you want is now provided in the latest release, which has added the option for the custom component to emit events that will be propagated upwards, and you can then access these events outside of vue-data-table
. Please, take a look at the README in the "Custom component" section ;)
from vue-data-table.
Related Issues (20)
- data table custom FooterCommponent feature not working HOT 8
- No server side rendering with large amount of records. HOT 2
- Sorting gives problems with integer columns and how can I align the cell titles? HOT 4
- Question: How to show all Records at in Table? How to set show entries "All" and also please add new option to export as 'PDF' or Print HOT 4
- Can't we use images to display in the table columns ? HOT 1
- Suggest to add checkbox for mass selection HOT 7
- How can i add emit to data-table component? HOT 3
- Question: Is it possible to display all the in the console? HOT 2
- Hello,this package contain server side? HOT 4
- How can I access to data from nested object? HOT 1
- How to sort column ASC order HOT 1
- Action button doesn't show HOT 1
- is it possible to set perpagesize into [10, 25, 50, 100, **ALL**] HOT 3
- Text field for filtered results HOT 1
- Column relationship HOT 2
- "Insert" functionality HOT 2
- Possible add Line number ? HOT 2
- Can i add Line background color ? HOT 1
- How to use the action buttons with vue 2 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-data-table.