En mi propio componente, estoy usando SfComponentSelect ( aquí en documentos oficiales )
Cuando hago clic en la opción de selección, la opción seleccionada no se muestra encima de la etiqueta "MySelect", de lo contrario, esto sucede en la muestra dentro de los documentos oficiales.
Este es mi CustomComponent.vue
<template> <SfComponentSelect label="MySelect"> <SfComponentSelectOption v-for="option in optionsList" :key="option.value" :value="option.value" class="sort-by__option" >{{ option.label }}</SfComponentSelectOption> </SfComponentSelect> </template> <script> import { SfComponentSelect } from '@storefront-ui/vue'; export default { name: "CustomComponent", components: { SfComponentSelect }, data(){ return { optionsList: [ { value: "opt-1", label: "Option 1", }, { value: "opt-2", label: "Option 2", } ] } } }; </script>Después de luchar con el problema, encontré una solución para este problema.
<SelectStore :label="name" :size="pdvLists.length" @change="changeLabel" :my-new-label="myNewLabel" persistent> <SfComponentSelectOption v-for="option in options" :key="option.value" :value="option.value" class="sort-by__option" >{{ option.name }}</SfComponentSelectOption> </SelectStore> <script> import MyNewComponent from './MyNewComponent'; export default { name: "ComponentBlaBla", components: { MyNewComponent }, data() { return { options: [ { value: "opt1", name: "Opt1" }, { value: "opt2", name: "Opt2" } ], myNewLabel: '' } }, methods: { changeLabel(value){ // change something let selectedOption = this.options.filter((item) => value === item.value); this.myNewLabel = selectedOption[0].name; } } }; </script>