Vue如何根據id在數(shù)組中取出數(shù)據
更新時間：2022年08月15日 16:54:08 作者：逍遙客.
這篇文章主要介紹了Vue如何根據id在數(shù)組中取出數(shù)據，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何根據id在數(shù)組中取出數(shù)據
這是一個非常實用的操作，尤其是編輯數(shù)據的時候。點擊編輯數(shù)據，通常會將編輯的這條數(shù)據發(fā)送給后端，然后后端在根據這個編號查詢出相應的數(shù)據在返回給前端。
那么請問，后端都將數(shù)據給你了，你直接在數(shù)組中取出來不是很好嗎？
這樣簡單快捷?？梢越o后端避免沒有必要的負擔，萬一網絡不好還會獲取失敗，尤其現(xiàn)在帶寬這么貴。
JS中有一個 findIndex()方法就是獲取對應數(shù)據在數(shù)組中的索引，然后就可以根據這個索引在數(shù)組中取出數(shù)據。
tableData[] // 這是保存所有數(shù)據的數(shù)組
根據id獲取當前數(shù)據在數(shù)組中的下標。
const index = ?this.tableData.findIndex((role) => role.id === id)
根據下標在數(shù)組中獲取數(shù)據
tableData[index]
完整范例
/**
* 獲取根據id獲取數(shù)組中對應的數(shù)據，注意：id是這個表中的id，不是數(shù)組下標
*/
handleEdit(id) {
? ? this.dialogVisible = true; // 彈出編輯框
? ? // this.tableData.findIndex(role => role.id === id) 取出id在數(shù)組中的索引，然后在根據數(shù)組索引從數(shù)組中取出數(shù)據。
? ? this.roleForm = this.tableData[
? ? ? ? this.tableData.findIndex((role) => role.id === id)
? ? ];
},
},Vue獲取數(shù)組的數(shù)組數(shù)據
Q：如何在vue獲取數(shù)組的數(shù)組？
A：用到js的map對象方法
一、data里要先定義好有兩個數(shù)組
二、主要代碼
這樣就可以獲取到數(shù)組的子數(shù)組數(shù)據
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue3實現(xiàn)掛載全局方法和用getCurrentInstance代替this
這篇文章主要介紹了Vue3實現(xiàn)掛載全局方法和用getCurrentInstance代替this,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家介紹了vue中百度地圖定位及附近搜索功能使用步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
文章介紹了如何在Vue項目中使用jsPlumb庫來生成流程圖,文章提供了兩個簡單的示例代碼,展示了如何定義流程圖的數(shù)據字段和如何配置連線樣式,最后,文章鼓勵讀者繼續(xù)探索更多關于vue和jsPlumb的使用技巧,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
網站中我們經?？吹接袀€導航路徑,可以直觀地顯示當前頁面的路徑,并快速返回之前的任意頁面,這是一個非常實用的功能,也是在Web前端必備的導航UI之一,這篇文章主要給大家介紹了關于vue3自己封裝面包屑功能組件的幾種方式,需要的朋友可以參考下2021-09-09
vue打印插件vue-print-nb的實現(xiàn)代碼
這篇文章主要介紹了vue打印插件vue-print-nb的實現(xiàn),需要引入插件npm install vue-print-nb --save，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細介紹了Vue3使用訊飛大模型的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
使用vue官方提供的模板vue-cli搭建一個helloWorld案例分析
這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個helloWorld案例,需要的朋友可以參考下2018-01-01
Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實現(xiàn)
這篇文章主要介紹了Vue使用Proxy監(jiān)聽所有接口狀態(tài)的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06