Vue如何根据id在数组中取出数据

当需要在 Vue 中根据 id 获取数组中的数据时，通常有以下两种方式：

1. 使用 find() 方法

find() 方法会返回数组中第一个满足指定条件的元素，如果找不到对应元素则返回 undefined。

假设我们有如下数据：

data() {
  return {
    list: [
      { id: 1, name: 'apple', price: 5.0 },
      { id: 2, name: 'banana', price: 3.0 },
      { id: 3, name: 'orange', price: 2.5 },
    ]
  }
}

现在需要根据 id=2 取出数组中的元素，可以使用以下代码：

let item = this.list.find(i => i.id === 2);
console.log(item); // { id: 2, name: 'banana', price: 3.0 }

2. 使用 filter() 方法

filter() 方法会返回一个新的数组，包含数组中满足指定条件的所有元素。

假设我们有如下数据：

data() {
  return {
    list: [
      { id: 1, name: 'apple', price: 5.0 },
      { id: 2, name: 'banana', price: 3.0 },
      { id: 3, name: 'orange', price: 2.5 },
    ]
  }
}

现在需要根据 id=2 取出数组中的元素，可以使用以下代码：

let item = this.list.filter(i => i.id === 2)[0];
console.log(item); // { id: 2, name: 'banana', price: 3.0 }

在这种方式下，需要注意 filter() 方法返回的是一个新数组，所以需要通过 [0] 取出数组中的第一个元素。

以上两种方式都可以根据 id 获取数组中的元素，具体选择方法取决于具体场景和个人喜好。