店面 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作为混合和复制从模板和scss从SfComponentSelect。
2. 为MyNewComponent定义一个新的props和html使用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>