The refactored component "Select" is not consistent with the previous one #4611
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
2.0.0-beta.11
Environment
OS: macOS 11.5.2 20G95 x86_64
Brower: Chrome/92.0
Reproduction link
Steps to reproduce
The problem I encountered is as follows:
This is a question about the difference between select before and after refactoring
First of all, we know select have options and value data。
Before version 2.0.0-beta.11
while input value，such as [1, 3] , it would display [1, 3] as usual.
After input options as [{ id: 1, name: "aa" },{ id: 3, name: "cc" }] and map key with id, label with name, then it would dispaly ["aa", "cc"] as a map of 1->aa and 3->cc
After version 2.0.0-beta.11
it always display raw value
demo code
<template>
<a-row>
<a-col>
loadData
<a-switch v-model:checked="checked_data" />
<a-select
style="width: 200px"
mode="multiple"
v-model:value="fakeData"
:options="tagList.map((item) => ({ key: item.id, label: item.name }))"
/>
</a-col>
<a-col>
load Options
<a-switch v-model:checked="checked" />
<span>{{ tagList }}</span>
</a-col>
</a-row>
</template>
<script>
import { ref, computed } from "vue";
export default {
name: "App",
components: {},
setup() {
const fakeData = computed(() => {
if (checked_data.value) {
return [1, 3];
} else {
return [];
}
});
const checked_data = ref(false);
const checked = ref(false);
const tagList = computed(() => {
if (checked.value) {
return [
{ id: 1, name: "aa" },
{ id: 2, name: "bb" },
{ id: 3, name: "cc" },
{ id: 4, name: "dd" },
];
} else {
return [];
}
});
return {
checked_data,
tagList,
fakeData,
checked,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
What is expected?
what I wonder if this is a feature or a bug.
For bug and it has been fixed, I wonder how can I show data map in latest version instead of any other way.
For feature, i want to know how to enable this feature in latest version
What is actually happening?
I hope to find the same implementation or alternative solution in the latest version