I'm using vue datatable, functionalities are working except callmethod() is not called on button click. When i click button no events are fired. Any Suggestions Please.
export default{
data(){
return{
columns: [
{label: 'name', field: 'name'},
{label: 'Link', representedAs: row => ` <button #click="callmethod(${row.id})"> </button>`, interpolate: true},
],
rows: [],
page: 1,
per_page: 10,
filter: '',
}
},
methods:{
callmethod()
{
console.log('function called');
},
EDIT: it looks like you're using vuejs-datatable actually. Still, there is only a presence of raw data and nothing like a callback there, so it should probably not be possible to do it there. Try to rather do it directly into your template somehow since nothing in the official documentation is talking about this.
Or maybe look another library that will allow you to do that. There are plenty and what you're trying to do may be easier with another package. The one you're currently using (vuejs-datatable) do only have 147 stars, so not the most popular. I'd recommend checking all the solutions available here: https://github.com/vuejs/awesome-vue#table
You can see the attached listeners like this, select the component from your vue devtools then check it's listeners in the console.
You're talking about Vuetify's v-data-table or another one? Because there is a lot of them around..
Also, from the official #data docs, we can see that it says
A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.
You should not handle any kind of #click events into data so far. Are you sure your library is intended to work this way ?
Related
I am working on a custom source plugin and I have 2 issues:
First, I want to create a field in the node my plugin creates, but i want the value of that field to be one of the config options
Something like this
{
resolve: 'plugin-name',
options: {
option1: 'value1'
},
},
createNodeField({
name: `field1`,
node,
value: configOption1,
})
Is that possible?
And also, whats the best way to do multiple calls of the same plugin? The API I am using forces me to do one request at a time for the data i need, no "overall" request.. is there a better way to do that instead of having {resolve: 'plugin-name', options: {option1} } x-times with different options in my gatsby-config.js?
I'm making an app which people can list their own items for rental. This has been going really well so far and I'm creating successful queries to my firebase firestore
I want users to be able to list their items but then specify when they are available or not. I'm not sure how to approach this.
I would imagine that the data structure at firebase would look like this
listedItem: {
itemName: 'name',
itemPrice: '£0000'
itemDescription: 'desc',
availability: {
week1: {
booked: true,
},
...
week52: {
booked: false,
}
}
}
I imagine the structure looking something like this for each listed item but I'm not sure whether this is the best way to approach this
Also I'm not too sure how to go about the UI side of things, Should I build this from scratch using views or can anyone recommend a solid plugin I could use?
Thanks
Building a project using Vue.js (and Laravel), the following (greatly simplified) code results in the below error:
Vue component:
<template>
<input type="text" class="form-control" v-model="main_object[item_id][my_answer_key]">
</template>
<script>
export default {
props: [
],
data() {
return {
main_object: {},
item_id: '1234',
my_answer_key: '5678'
}
},
ready: function () {
vm = this;
},
methods: {
}
}
</script>
Error received:
We know you can use the vm.$set() method to add properties to the object. However, we’re building the model path on the fly (item_id and my_answer_key change depending on various user options being selected). It seems like we have to write a method that determines if the object property is already set, and if it's not set, to then set it. Is there a better way to accomplish the above?
You could seemingly get around this by using the created hook and $set:
created: function () {
this.$set(this.item_id + "." + this.my_answer_key, "")
}
However, if item_id and my_answer_key can change, this approach will ultimately not work because Vue does not have dynamic two way binding. In other words, the binding in your v-model will be created once and will not change later if either of the item_id or my_answer_key values change.
So, to accomplish something like this, you might need to resort to a kludge like using a v-if and toggling it to destroy and recreate the input (and it's binding). That might work.
Sometimes, computed's can help with these situations. Bind your input to a simple attribute on your data model and use a computed to generate the actual nested data model you need elsewhere.
I want to render a view which I create when the button on another view is clicked.
Here is my controller code, and I am following the MVC architecture
Ext.define('demo.controller.LoginController' , {
extend: 'Ext.app.Controller',
config: {
refs:{
loginAction: 'button[action=login]'
},
control:{
loginAction: {
tap:'loginProcess'
}
}
},
loginProcess:function(button,e,opts){
// Render View here
}
});
I have searched and I came across getMainView().push() and Ext.ViewPoart.add() but it's not working. According to the MVC pattern how should call this view from a controller?
EDIT
code of profilecontainer
Ext.define('demo.view.ProfileContainer',{
extend:'Ext.Panel',
xtype:'profilecontainer',
requires: [
'Ext.Label'
],
config: {
items:[{
xtype:'label',
html:'hi'
}]
}
});
Both of the ways you have tried should work, if you set them up correctly.
First, getMainView().push(newView) will work if mainView is an Ext.navigation.View. See the docs for this method here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.navigation.View-method-push
You can also use Ext.Viewport.setActiveItem(newView), assuming you have no typos (your post says ViewPoart). (Ext.Viewport.add will add the panel to the Viewport, but not set it as the active Card in the layout)
If neither of these are working, then you probably are not configuring your controller correctly. If that is the case, ensure that your loginProcess method is being called. If it is not, then your selector, button[action=login], is not correct.
For the listeners part of this data store in sencha touch, what exactly does the 'load' event mean? I searched the api documentation but was unable to find an explanation in the data store section nor the observable class section.
new Ext.data.Store({
model: "",
proxy: {
type: "ajax",
url : "/search/json/",
reader: {
type: "json",
root: "searchResult"
}
},
listeners: {
load: myapp.results //Note: myapp.results is a function defined elsewhere
}
});
As an additional note, if anyone knows of a reference which lists all of the listener 'eventnames' such as load, and their significance I would be grateful if they would be so kind as to post them here. (The sencha documentation only says: 'The name of the event to listen for. May also be an object who's property names are event names. See' and ends at See )
Sencha API says "Fires whenever the store reads data from a remote data source." There is all different event-names too. Am I missing something?
This event is fired when the data is loaded.
You must assign a function to use it.
listeners:{
load:function(store,records,options){
// Do stuff, you can access here to the loaded store, the loaded records and options
}
}
It will be called each time the data is loaded, on refresh, on page change, etc.
Consider two components that is one is dependent upon another component which is to used as input by it in such a case we can make use of load function.