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

目录
  • 如何根据id在数组中取出数据
  • Vue获取数组的数组数据

如何根据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里要先定义好有两个数组

二、主要代码

这样就可以获取到数组的子数组数据

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue forEach循环数组拿到自己想要的数据方法

    如下所示: <el-checkbox v-for="(item) in jurisdictionContent" :label="item.id" :key="item.id" class="checkboxMargin"> <span>{{item.value}}{{item.checked}}</span> </el-checkbox> handleJurisdiction(

  • Vue向后台传数组数据,springboot接收vue传的数组数据实例

    用axios前台代码: let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result) }) 后台代码: @RequestMapping(&qu

  • Vue如何循环提取对象数组中的值

    Vue如何循环提取对象数组中的值

    1.数据如下,提取name和callcount 2代码. getQueryCallStatistics("sesp1", this.provinceId).then((res) => { let arr = []; let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []; this.xunshiMap = res.data.callstatistics; res.data.callstatistics.forEach(

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

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

    目录 如何根据id在数组中取出数据 Vue获取数组的数组数据 如何根据id在数组中取出数据 这是一个非常实用的操作,尤其是编辑数据的时候.点击编辑数据,通常会将编辑的这条数据发送给后端,然后后端在根据这个编号查询出相应的数据在返回给前端. 那么请问,后端都将数据给你了,你直接在数组中取出来不是很好吗? 这样简单快捷.可以给后端避免没有必要的负担,万一网络不好还会获取失败,尤其现在带宽这么贵. JS中有一个 findIndex()方法就是获取对应数据在数组中的索引,然后就可以根据这个索引在数组中取

  • Vue.js在数组中插入重复数据的实现代码

    1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index"的数组插入,数组不支持重复数据的插入 2.1  JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type=&q

  • vue实现将数据存入vuex中以及从vuex中取出数据

    1.在store文件下面新建文件 print.js ,写入以下代码 /** * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } // getters const getters = {} // actions const actions = {} // mutations const mutations = { setPrint(state, all) { //设置参数 state.all

  • 从numpy数组中取出满足条件的元素示例

    例如问题:从 arr 数组中提取所有奇数元素. input:arr = np.array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) output: #> array([1, 3, 5, 7, 9]) Solution: #Input >>> arr = np.array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) #Solution arr = arr[arr % 2 == 1] >>> array([1, 3, 5, 7

  • JavaScript使用二分查找算法在数组中查找数据的方法

    本文实例讲述了JavaScript使用二分查找算法在数组中查找数据的方法.分享给大家供大家参考.具体分析如下: 二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除困难.因此,折半查找方法适用于不经常变动而查找频繁的有序列表.首先,假设表中元素是按升序排列,将表中间位置记录的关键字与查找关键字比较,如果两者相等,则查找成功:否则利用中间位置记录将表分成前.后两个子表,如果中间位置记录的关键字大于查找关键字,则进一步查找前一子表,否则进一步查找后一

  • java获取两个数组中不同数据的方法

    本文实例讲述了java获取两个数组中不同数据的方法.分享给大家供大家参考.具体实现方法如下: public static <T> List<T> compare(T[] t1, T[] t2) { List<T> list1 = Arrays.asList(t1); List<T> list2 = new ArrayList<T>(); for (T t : t2) { if (!list1.contains(t)) { list2.add(t)

  • Java替换int数组中重复数据的方法示例

    本文实例讲述了Java替换int数组中重复数据的方法.分享给大家供大家参考,具体如下: package test; import java.util.HashSet; public class TestList { /** * 根据传递过来的参数过滤掉重复数据 * @param number:需要过滤掉的数据 * @return:筛选好的新数组 */ public static int[] Filter(int[] number){ HashSet<Integer> hs=new HashSe

  • Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. Vuex 中的 mutation 非常类似于事件: 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数.mutation 必须是同步函数. 不带载荷(只改变数据的状态) 接前面几篇文章的例子,这里我们修改商品价格减半. store.js mutations: { //商品价格减半:

  • php去除数组中重复数据

    废话不多说,直接上代码 复制代码 代码如下: /**          * 给数组排重          * 与array_unique函数的区别:它要求val是字符串,而这个可以是数组/对象          *          * @param unknown_type $arr 要排重的数组          * @param unknown_type $reserveKey 是否保留原来的Key          * @return unknown          */       

随机推荐