Storefront UI的SfComponentSelect组件选中选项后无法正常展示选中值

你的代码缺失了SfComponentSelect组件必填的双向绑定配置，没有给组件传递选中值的状态源，因此组件无法识别当前选中项，也就不会在标签上方渲染选中内容。

修正后的完整代码如下：

<template>
  <SfComponentSelect label="MySelect" v-model="selectedValue">
    <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 {
      // 新增选中值存储变量
      selectedValue: '',
      optionsList: [
        {
          value: "opt-1",
          label: "Option 1",
        },
        {
          value: "opt-2",
          label: "Option 2",
        }
      ]
    }
  }
};
</script>

SfComponentSelect的运行逻辑是通过v-model绑定的值和子组件SfComponentSelectOption的value属性做匹配，匹配到对应项后自动提取其文本内容渲染到标签上方的选中展示区域，按上述代码补充配置即可正常展示选中内容。

内容的提问来源于stack exchange，提问作者ClodClod91