I have an Ember.js application, and for a form in it, I am using ember-power-select. I already used that addon, but I have some problems with how to configure the selected element. As the title say, I am asking for help with how to configure the selected with a function.
I want to set the selected variable with a function that retrieve a variable from a services.
My component look like that:
import Ember from 'ember';
export default Ember.Component.
appInfo: Ember.inject.service('app-info'),
languageOption: ['Français', 'English'],
language() {
/*
* In my service appInfo, I have a function called getLocale
* that return the current locale variable.
*/
return this.get('appInfo').getLocale();
},
actions: {
changeLanguage(lang)
{
this.set('language', lang);
}
}
});
And my template look like that:
{{#power-select
selected=language
options=languageOption
searchEnabled=false
onchange=(action 'changeLanguage')
placeholder=language
as |lang|}}
{{lang}}
{{/power-select}}
As you can see I'm trying to set my selected value with the current locale obtained via the service appInfo. Everything is working just fine except the selected part.
In the template, you can see that 'selected' is a value that can be set within a component, except that I don't want to set the value with a hardcoded one, but with the current value of locale.
Every tips and/or help is appreciated!
Just solved it, I used
init()to make it work. As @BrandonW said in the comment, a computed property doesn't work too.This is the code that I putted in my component:
This is what you want to do if you want to use a function to set
selectedin ember-power-select addon.