首页 > 其他分享 >Vue3中 使用v-for嵌套 获取其他数组中的值作为key值 渲染数据

Vue3中 使用v-for嵌套 获取其他数组中的值作为key值 渲染数据

时间:2023-11-27 21:56:49浏览次数:32  
标签:key 获取 嵌套 键值 数组 Vue3 row

            <tbody>
                <tr v-for="(row, idx) in rows" :key="idx">
                    <td v-for="(item, key) in title" :key="key">{{ row[key] }}</td>
                </tr>
            </tbody>

rows是一个数组,但是我不知道他的键值,无法获取数据。但 title 这个数组里有 rows 的键值

采用v-for循环嵌套成功获取到值。尽管row是一个对象格式,还是能用row[key] 来获取到值

标签:key,获取,嵌套,键值,数组,Vue3,row
From: https://www.cnblogs.com/itwxb/p/17860564.html

相关文章

  • 2-4 函数高级(嵌套、闭包、装饰器)
    ​ 概要:函数的嵌套闭包装饰器  1.函数嵌套Python中以函数为作用域,在作用域中定义的相关数据只能被当前作用域或子作用域使用。NAME="ayden"print(NAME)​deffunc():  print(NAME)​func() 1.1函数在作用域中其实,函数也是定义在作用域中......
  • vue3 jsPlumb学习
    <template><divclass="box"><div@click="clearLine">clear</div><div@click="initConponents">line</div><div@click="getData">get</div></div>......
  • keycloak~关于session idle和session max的解释
    keycloak可以帮助我们实现这个功能:用户token每5分钟失效一次,失效后通过refresh_token来换新的token,而refresh_token每30天失效一次,但如果用户3天都没有任何操作(就是没有用refresh_token去换新的token),那么3天后也让refresh_token失效,用户需要从新去登录。先说refresh_token过期时......
  • vue3使用kindeditor富文本编辑器组件,支持上传图片(接口或base64)
    参考文章:https://blog.csdn.net/qq_27936291/article/details/1247689891.安装插件npmi@zhj-target/vue3-kind-editor--save或者yarnadd@zhj-target/vue3-kind-editor2.在vue项目中使用importVue3KindEditorfrom'@zhj-target/vue3-kind-editor'conststate=re......
  • 如何使用Tampermonkey开发并使用一个浏览器脚本
    准备工作简介Tampermonkey是一款强大的浏览器扩展,它允许您定制网页的行为,改变和优化网页的展示方式或者功能以满足个人需求。通过编写自定义脚本,您可以实现许多有趣的功能,从自动化任务到改进网页界面,一切尽在掌握。脚本一般指用户脚本(UserScript),他是一段Javascript代码,它......
  • Gerrit集成keycloak认证
    Gerrit集成KeyCloak实践背景:   为了更好的维护代码仓库,实现公司内部员工和外部员工账号集中管理,搭建Keycloak身份认证平台集成Gerrit代码仓库。Keycloak是什么?Keycloak是一个开源的、高度可定制的身份认证和授权管理解决方案,它提供了多种认证方法,包括单点登录、OAuth2.0和Op......
  • 【前端VUE】Vue3路由设置(Typescript版本)
    新建项目npmcreatevite@latest安装vue-routercd.\my-web\npminstallvue-router在src->components下新增(Home.vue)<template><h1>我是主页</h1></template>在src->components下新增(Register.vue)<template><h1>用户......
  • 【前端VUE】Vue3条件渲染指令(v-if、v-else、v-else-if、v-show、v-for)
    新建项目npmcreatevite@latest运行项目cd项目目录npminstallnpmrundev条件渲染指令1、v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。2、v-else可以使用v-else为v-if添加一个“else区块”。3、v-else-ifv-else......
  • Vue3 - Teleport 传送门
    前言对比Vue2,引出并展开Vue3。本文讲述了Teleport传送门是什么,以及使用方法和代码示例。介绍学过React的同学可能知道,Portal也提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案,当然咱们大名鼎鼎的Vue3也做到了,关于这方面的功能需求,第三方库也是有......
  • nginx负载均衡 报错 “验证视图状态 MAC 失败。如果此应用程序由网络场或群集托管,请确
    在网上搜寻了很久看了很多关于验证视图状态MAC失败的解决方法。大部分人都说是在页里或web.config里加EnableEventValidation="false"EnableViewStateMac="false"ViewStateEncryptionMode="Never"这些属性的设置。但是这并不从根本上解决问题,相反这样做了反而更加不安全。我......