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