Unable to set mapped Select initial value


I'm trying to set initial value for mapped Select component but no matter what I put in the "Default" field, the select won't get populated. Any ideas?


Hey @TomF, welcome to the community! Have you tried something like {{self.data[i]}}, where i is the index of the option you want to set to default. Or if your data source is an array of objects containing key:value pairs (rather than just an array), you would want to try {[self.data[i].someKey}} where that key is the key you're mapping to value.

A screenshot of your data source and mapped options would be helpful.

You need to make sure the "Value" and the "Default Value" are exactly the same.
When hovering each of the variables you set, you can see the corresponding values and even inspect them usint the "Inspect" tool.

If your default value is a result of a query, make sure it is not wrapped in an array ( [] ) anymore. It needs to be of the type string, number, date, etc. not object.


Hi @TomF

If the above suggestions don't solve your case, I'd also be curious if this is happening within a form?\

What do you have for the form data key?

Ah I see. Thanks a lot - it is now populating now.

I'm having another issue where I need to clear the select after the query is ran. It always clears the first select in the listview rather than the one the query was run for. Please see attached image.

Hi @TomF

One option could be to add an event that updates a temporary state variable with the magic variable, i for the clicked item:

Then, in your success handler, you can reference the index:

Your ans helped!


1 Like