VueJS - 过滤对象数组并将 $route.params 与属性值进行比较

Question

我正在尝试使用 JavaScript 对 arrays 进行排序，这样我只想在属性值等于 $route.params.my_id 时才显示它。

这是我从 API 得到的回复，即对象数组：

 [
      {
        "my_id": 2,                            <-- index[0]
        "employee_name": "John", 
        "salary: "26000",           
        "experience: "5"     
      },
      {
        "my_id": 3,                            <-- index[1]
        "employee_name": "Sam",
        "salary: "46000",             
        "experience: "15"          
      },
       {
        "my_id": 1,                            <-- index[2]
        "employee_name": "Raj",
        "salary: "16000",
        "experience: null           
      }
   ]

在 component1 中，我设置了$route.params.my_id = company.my_id.toString() ，其中 company.my_id 取自 API 的响应。 因此，company.my_id 根据所选路线分别获得 1、2 或 3。

在 component2 中，我使用company[$route.params.my_id].employee_name作为 select 按钮的选项。 在这里，我使用 $route.params.my_id 作为索引值，因此它可以是 1、2 或 3。

但这里有个问题，索引从零开始，所以是[0]、[1]或[2]。 因此，如果$route.params.my_id is 2 ，那么在 component2 company[2].employee_name它应该显示 my_id 2 的信息，而是显示 my_id 1 的信息，因为 index[2] 包含 my_id 1 的信息。

Answer 1

不要依赖排序来实现这一点

这是一个聪明的想法，但只有当my_id值形成一个良好的序列时才能很好地工作，即总是由从 1（或 0）向上以某种排列的整数组成。

不要依赖这种情况。

如果您将my_id值更改为与数组索引完全不同的值，例如“idx”、“idy”、“idz”，它将帮助您进行调试。 这样，当您的代码中断时，问题所在就更明显了。

过滤数组，而不是对其进行排序

你可以试试这个，在.then( result => {... })

 this.company= result.data.filter(company => company.my_id === $route.params.my_id )[0]

这仅提取了一个感兴趣的公司条目。 试试看。

最好做错误检查

如果上述方法原则上有效，您应该改进代码以测试两种可能的错误状态。 首先，可能没有与 id 匹配的公司。 其次，可能有不止一家公司与之匹配。

const matchingCompanies = result.data.filter(company => company.my_id === $route.params.my_id )
if (matchingCompanies.length===0){ /* Error action for no matches */}
if (matchingCompanies.length>=2){ /* Error action for multiple matches */}
// Now we know there is exactly one match
const matchingCompany = matchingCompanies[0];