`ASelect` shows `value` when selected instead of `text`

[larrasu]

Following the basic usage: https://anu-vue.netlify.app/guide/components/select.html#basic

It happens on the demo too.

[jd-solanki]

Sorry I didn't get what you mean?

Can you please mention what is expected and what's happening.

[larrasu]

I'm sorry for the confusion. From the docs:

<script setup>
// ...
const frameworks = [
  { text: 'VueJS', value: 'vue' },
  { text: 'ReactJS', value: 'react' },
  { text: 'AngularJS', value: 'angular' },
  { text: 'SolidJS', value: 'solid' },
  { text: 'AlpineJS', value: 'alpine' },
]
</script>
<template>
  <div class="grid-row sm:grid-cols-2 justify-items-stretch">
    <!-- Framework -->
    <ASelect
      v-model="selectedFramework"
      :options="frameworks"
      :hint="`value: ${JSON.stringify(selectedFramework)}`"
    />
  </div>
</template>

If you select VueJS, it should show up as VueJS, not vue.

[jd-solanki]

It's working as expected. text property is for rendering text and value property is for value of modelValue. Hence, VueJS is rendered because of text property and when you select it vue is set as modelValue due to value property.

I hope you got it.

To give more details, options prop is under the hood passed to the list component.

Let me know if you have any further queries.

[larrasu]

Thank you for the response.

How will I make it render the selected option as the text, not the value? Also, the slots example on the docs is currently not working. I was trying to follow it but the handleOptionClick doesn't exist in the #default slot.

I'm sorry for all the questions and if anything is confusing to what I'm trying to say since I'm relatively new to Vue/Nuxt.

[jd-solanki]

I'm relatively new to Vue/Nuxt

No worries. If you want it to display VueJS & also modelValue should be VueJS then why not just use array of string?

const frameworks = ['VueJS', 'HTML']

Also, the slots example on the docs is currently not working

Yes, I fixed this in the latest commits but unfortunately docs isn't deploying due to a type error. I'm introducing generic components in the next update but I'm facing a roadblock ATM. As soon this is resolved docs will be updated with the fix. Additionally handleOptionClick will also resolve.

Thanks for your patience.

[larrasu]

No worries. If you want it to display VueJS & also modelValue should be VueJS then why not just use array of string?

I just used the example from the docs to explain the issue. But in my case, I need to render text as the selected option instead of value since uuid will be stored in the value. For example:

const categories = [
  { text: "Mall", value: 1 },
  { text: "Restaurant", value: 2 },
];

By the way, I know Anu is still not production ready, but I really like the DX and the UI style. Thank you for creating this library.

[IcetCode]

Maybe adding text-field and value-field to ASelect could solve this issue, because the backend API will always return various kinds of data.

[jd-solanki]

Yes @IcetCode We have to do this for list & select both

[jd-solanki]

hi @larrasu do you prefer props like title-key & value-key to render the UI according to your needs?

In your case, You'll be able to use props like <ASelect value-key="text" /> so value property won't get treated as string to render.

In the meantime, You can use slots as shown in this example.

[Eun]

I also expected that text would be used for rendering the selected value in the ASelect component. I used the display values as keys for now and in code I replaced the display values with the ids