Vue如何根據id在數組中取出數據

Posted on by

如何根據id在數組中取出數據

這是一個非常實用的操作，尤其是編輯數據的時候。點擊編輯數據，通常會將編輯的這條數據發送給後端，然後後端在根據這個編號查詢出相應的數據在返回給前端。

那麼請問，後端都將數據給你瞭，你直接在數組中取出來不是很好嗎？

這樣簡單快捷。可以給後端避免沒有必要的負擔，萬一網絡不好還會獲取失敗，尤其現在帶寬這麼貴。

JS中有一個 findIndex()方法就是獲取對應數據在數組中的索引，然後就可以根據這個索引在數組中取出數據。

tableData[] // 這是保存所有數據的數組

根據id獲取當前數據在數組中的下標。

const index =  this.tableData.findIndex((role) => role.id === id)

根據下標在數組中獲取數據

tableData[index]

完整范例

/**
* 獲取根據id獲取數組中對應的數據，註意：id是這個表中的id，不是數組下標
*/
handleEdit(id) {
    this.dialogVisible = true; // 彈出編輯框
    // this.tableData.findIndex(role => role.id === id) 取出id在數組中的索引，然後在根據數組索引從數組中取出數據。
    this.roleForm = this.tableData[
        this.tableData.findIndex((role) => role.id === id)
    ];
},
},

Vue獲取數組的數組數據

Q：如何在vue獲取數組的數組？

A：用到js的map對象方法

一、data裡要先定義好有兩個數組

二、主要代碼

這樣就可以獲取到數組的子數組數據

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：