javascript - 店面 UI - SfComponentSelect 无法正常工作

Question

在我自己的组件中，我正在使用 SfComponentSelect （在官方文档中）

当我单击选择选项时，所选选项未显示在标签“MySelect”上方，否则在官方文档中的示例中会发生这种情况。

这是我的 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>

Answer 1

在努力解决问题之后，我找到了解决这个问题的方法。

1. 创建新组件（称为：MyNewComponent），将 SfComponentSelect 定义为 mixins，并从 SfComponentSelect 的模板和 scss 复制。
2. 为 MyNewComponent 定义一个新的 props 和 html
3. 使用 MyNewComponent 如下

<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>