Vue JS 中的数组操作和 Typescript 错误

Posted 2023-02-22

【中文标题】Vue JS 中的数组操作和 Typescript 错误

【英文标题】：Array manipulation and Typescript error in Vue JS

【发布时间】：2021-10-29 07:46:45

【问题描述】：

我正在尝试检查一个列表（列表 A）中的项目是否包含在另一个列表（列表 B）中，如果是，则列表 B 中相应项目的属性/字段应更改其布尔值.

这是我的代码：

export default defineComponent(
  name: 'Users',
  props: 
      existingUsers : 
          type: Array as PropType<Array<UserModel>>,
      
  ,
  async setup(props) 
    const allUsers = ref<Array<UserModel>>(await userService.list())
    const userList = ref<Array<UserModel>>([ id: 0, email: '', first_name: '', last_name: '', ])
   
    function defineUsers(): Array<UserModel> 
        if (props.existingUsers) 
            const existingUsers = props.existingUsers
            userList.value = allUsers.value
            .map((user: UserModel) => existingUsers
            .forEach((us: UserModel) => (us.id === user.id) ? user.isSelected = true : user)))
            return userList.value;
         else 
            userList.value = allUsers.value
            return userList.value
        
    
    defineUsers();

基本上，如果没有现有用户作为 props 传递，则 userList 等于 allUsers（从 GET 请求获取值到 API）。如果存在作为 props 传递的现有用户，则应相应修改变量 allUsers：existingUsers 中包含的 allUsers 中的每个用户都需要将其 'isSelected' 值设置为 true。

这是我在函数 defineUsers 内的第 3 行上与 userList.value 相关的错误：

类型 'ComputedRef' 缺少来自类型 ' id: number; 的以下属性电子邮件：字符串；名字：字符串；姓氏：字符串；组织？： id：号码；公司名称：字符串；地址：字符串；邮政编码：字符串；城市：字符串；状态：字符串；国家：字符串；增值税：字符串；财政代码？：字符串 |不明确的; codeice_sdi?: 字符串 |不明确的;注册日期？：字符串 | undef...'：长度、pop、push、concat 和另外 28 个。Vetur(2740)

关于如何解决这个问题的任何线索？

非常感谢。

【参考方案1】：

我就是这样解决的：

function defineUsers(): Array<UserModel> 
    if (props.existingUsers) 
        const existingUsers = props.existingUsers
        userList.value = allUsers.value.map((user: UserModel) => 
            let isSelected = existingUsers.some((us: UserModel) => 
                us.id === user.id
            );
            user.isSelected = isSelected;
            return user;
        );
        return userList.value;
     else 
        return allUsers.value;
    

    

【参考方案2】：

你不能使用 .forEach 方法作为返回类型，你需要这样做

userList.value = allUsers.value.map((user: UserModel) =>
  existingUsers.map((us: UserModel) => 
    user.isSelected = us.id === user.id;
    return user;
  )
);

让我知道这是否可行！

【讨论】：

Grazie Cosimo。我现在收到以下错误：Type 'UserModel[][]' is notassignable to type ' id: number;电子邮件：字符串；名字：.....'