1、Vue 3 + TypeScript的方式,将对象的键名和键值提取到数组中
已知data1如下:
data1 = [
{ A: 11,B: 22,C: 33,D: 44 },
],
得到data2如下
data2 = [
{
name: "A",
value: "11"
},
{
name: "B",
value: "22"
},
{
name: "C",
value: "33"
}
]
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
const data1 = [
{ A: 11, B: 22, C: 33, D: 44 },
];
const data2 = Object.keys(data1[0]) // Get keys of the first object in data1
.filter(key => ['A', 'B', 'C'].includes(key)) // Filter keys A, B, C
.map(key => ({
name: key, // Set name as the key (A, B, C)
value: data1[0][key].toString(), // Set value as the corresponding value converted to string
}));
return {
data2,
};
},
});
</script>
2、使用Vue 3 + TypeScript的方法,将data1
的键名(A、B、C)和对应的值赋值给data2
的name
和value
字段
data1如下:
data1 = {
A: 1, B: 2, C: 3, D: 4
}
得到data2如下:
data2 = [
{
name: 'A',
value: 1,
},
{
name: 'B',
value: 2,
},
]
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
const data1 = {
A: 1,
B: 2,
C: 3,
D: 4,
};
const data2 = Object.keys(data1)
.filter(key => ['A', 'B'].includes(key))
.map(key => ({
name: key,
value: data1[key],
}));
return {
data2,
};
},
});
</script>