We Keep Coding

event on button not working in vue-datatable

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 ?

Nested dropdown in react-select

I am using react-select to render the dropdown. The options to render the dropdown looks like this
[
{
text:'Fruit',
value:'mango'
level: 0
},
{
text:'Seasonal',
slug: 'saasonal',
level: 1
},
{
text:'Orange',
slug: 'orange',
level: 2
},
{
text:'Mango',
slug: 'mango',
level: 2
},
{
text: 'Winter',
slug:'winter',
level:1
},
{
text: 'Plum',
slug:'plum',
level:2
}
]
I would like the dropdown to be like
Fruit
Seasonal
Orange
Mango
Winter
Plum
I have tried adding a group to the react-select, but then the group heading is not clickable.
I have also referred to the stackoverflow link
[https://stackoverflow.com/questions/53119912/how-can-i-create-nested-option-groups-in-react-select-v2][1]
and tried creating a recursive dropdown in the same manner it is posted on the link above by passing my options as the data but was not successful.
The order of the within nested dropdown is based on the level.

react-select actually just got this feature builtin in July.
Here's the pull request where they implemented it.
Here's a working example from the pull request page.
I'm not sure if it has made its way into the master branch yet or not but you can always pull from the version listed in the package.json file in the sample above if the sample code doesn't work with the version you're using.
EDIT: Scratch that, you want group headings to be clickable. I don't think that was part of this commit.

Connecting firebase to Angular JS - possible json issue

The question is how to format firebase to work with angular. I have a view that works with ng as a static view. In the $scope it is defined like this
$scope.standardItems = [{
name: "The Name",
sizeX: 2,
sizeY: 1,
row: 0,
col: 0
}, {......etc
But if I try and supply data from firebase it does not work probably because the output is not formatted correctly. The connection seems fine and I can add data but firebase adds it own id. This is the how the data looks exported from the firebase console
{
"-KdJVcYUXMfeym3jPy04" : {
"att" : "grid",
"col" : 0,
"id" : 1487476528646,
"name" : "This is a test grid",
"row" : 0,
"sizeX" : 2,
"sizeY" : 1
},
The extra parameters are not important but the nesting probably is. I have logged the out put of the firebase array using this
var todosRef = new Firebase('https://xxxxxxxxxx.firebaseio.com/');
$scope.todos = $firebaseArray(todosRef);
console.log($scope.todos);
And I get this in the chrome debug console
Array[0]
0:Object
$id: "-KjhbuvgtVvFUnbfbmj04"
$priority:null
att:"grid"
col:0
id:1487476528646
name:"This is a test grid"
row:0
sizeX:2
sizeY:1
__proto__
Here is the important line from the view using angular ng-repeat
<li gridster-item row="item.position[0]" col="item.position[1]" size-x="item.size.x" size-y="item.size.y" ng-repeat="item in todos">
//..
</li>
My question is how do I pass to angular (the view) exactly what is being passed in the static example above from the controller? How can I "print" exactly what is being passed to angular from the array - the export from firebase console and chrome log console are not totally the same. It does not help that all the parent nodes are unique non sequential IDs such as -KdJVcYUXMfeym3jPy04 as it is not obvious how to strip them off again - or how to use a word such as "grid". Do I need a wildcard in the path and if so what is it? The code works using a static local array so it is all about reading json from firebase.

OK, I hope this answer is helpful. There is nothing wrong with the code posted here! Angular js will read firebase without any changes and the outputs from the chrome console and the firebase console should look like they are here even with the "-adgadhfe445ggh45" added id index. In my case I made a syntax error that excluded the ng-repeat from the the controller because it fell outside and its closing div
But at least we now know that we do not need any code to reformat the firebase.

Display the right value from API result - AngularJS Internationalization

I'm making a huge application running under AngularJS and getting data from an API. i18n module I'm using is :
angular-translate
I fell in front of a problematic that I haven't found a solution yet, let me explain.
In the result of my API I have several value which can have this format:
1st possible format :
{
country: {
label: {
fr: 'France',
en: 'France',
}
}
}
2nd possibility :
{
country: {
label_fr: 'France',
label_en: 'France',
}
}
}
Exemple of use case : Using a select in a form
I can't use a custom directive to process all the check and parse the correct value from the current langage used in the App.
"label" value (label_fr label_en or label.fr label.en)
So, How can I display the good value from the API result ?
I must accept both format. But I can code the logic part for this. In First I mostly want make it works for one format and later I'll figure out how to make them work.
If any one have an idea or a solution to solve my problem I'll be very thankful.

Working with bootstrap modal and ember

I have a working version of bootstrap modals who open the nested list ('options') of a json who looks like that :
{
product: [{
id: 1,
title: 'Some dope shoes',
options: [
{ id: 1, name: 'Color' },
{ id: 2, name: 'Size' }
]
},
{
id: 2,
title: 'Some dope',
options: [
{ id: 3, name: 'Lenght' },
{ id: 4, name: 'Flavor' }
]
}
]
}
I've wrote everything for modals with templates I did used any file component. The trick is to make uniq modal id. Url looks like :
<a href="#" data-toggle="modal" data-target="#ma-modal{{optionid}}" title={{title}}>{{mmmh}}</a>
And modals looks like :
<div class="modal" id="ma-modal{{optionid}}"></div>
I don't feel confident about this code and because I'm learning ember I would like to know if doing all of this in template without any file components is something bad ?
Playing with the ids appears to me as a hack.

In my opinition, creating a component for modal is a way better solution, because:
Ember will generate ids and you will have an access to rendered element inside lifecycle hooks, so in many cases there is no need to know an id.
You will likely need to call some js-function to show a modal. Component gives a possibility to do this in the right moment (after rendering all elements) by using lifecycle hooks
It is easy to re-use a component if needed.
You may found all necessary info about components in documentation. Additionally, you can read about new (introduced in 1.13) lyfecycle hooks in this blog post.
And of course, you can use one of a many ember-cli addons, if you will find an appropriate one