Vue3如再setup中如何将数组对象中的部分数据取出并修改键名输出

可以使用Vue3中的解构赋值和map函数来实现。

假设有一个数组对象arr，其中每个元素都包含name、age、gender三个属性，现在需要将其中的name属性改为username，并且只输出username和age两个属性，可以按如下方式处理：

import { reactive } from 'vue'

const arr = reactive([
  { name: 'Alice', age: 18, gender: 'female' },
  { name: 'Bob', age: 20, gender: 'male' },
  { name: 'Charlie', age: 22, gender: 'male' }
])

const { username, age } = arr.map(({ name, age }) => ({ username: name, age }))
console.log(username, age) // [ { username: 'Alice', age: 18 }, { username: 'Bob', age: 20 }, { username: 'Charlie', age: 22 } ]

在代码中，使用map函数遍历数组对象并返回一个新的对象数组，其中只包含username和age两个属性。然后使用解构赋值将新数组中每个对象的username和age属性分别赋值给变量username和age。最后输出新数组即可。

相关问题

vue3在setup中如何向响应式数组对象中添加属性

您可以使用Vue提供的reactive函数来创建响应式数组对象，然后使用push方法向其中添加属性。示例代码如下：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      list: []
    });

    function addItem() {
      state.list.push({ name: 'item' });
    }

    return {
      state,
      addItem
    }
  }
}

在上面的代码中，我们使用Vue提供的reactive函数创建了一个响应式对象state，其中包含一个空数组list。然后我们定义了一个addItem函数，用于向list数组中添加一个名为item的对象。由于state是响应式对象，因此当我们调用addItem函数时，Vue会自动更新视图以反映list数组的变化。

vue 对象数组套对象数组，取出内层对象数组拼接在一起

可以使用`flatMap`方法来取出内层对象数组并拼接在一起。下面是一个示例代码：

// 假设有一个对象数组
const arr = [
  { id: 1, items: [{ name: 'item1' }, { name: 'item2' }] },
  { id: 2, items: [{ name: 'item3' }, { name: 'item4' }] }
];

// 使用flatMap方法取出内层对象数组并拼接在一起
const innerArray = arr.flatMap(obj => obj.items);

console.log(innerArray);
// 输出：[{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }, { name: 'item4' }]

在Vue中，你可以在模板中使用computed属性，或者在方法中使用该代码来获取拼接后的内层对象数组。