arrays - VueJS - 如何使用胡须构建动态值?
问题描述
在数据中,我有 2 个数组。在模板中,我想使用数组的特殊键的值来定位第二个数组。
<template>
<table>
<tr v-for="sa in mySecondArray">
<td v-for="fa in myFirstArray">
{{ ??? }}
</td>
</tr>
</table>
</template>
// ...
data() {
myFirstArray: [
{
a: "KeyOne",
b: "we don't care",
c: "we don't care",
},
{
a: "KeyTwo",
b: "we don't care",
c: "we don't care",
},
],
mySecondArray: [
{
KeyOne: "foo",
KeyTwo: "bar"
},
{
KeyOne: "hello",
KeyTwo: "world"
},
],
在这个例子中,我想显示
<table>
<tr>
<td>foo</td>
<td>hello</td>
</tr>
<tr>
<td>bar</td>
<td>world</td>
</tr>
</table>
我试过 :
<tr v-for="sa in mySecondArray">
<td v-for="fa in myFirstArray">
{{ sa + fa.a }}
</td>
</tr>
在这种情况下,它显示 [object Object]。
我试过 :
<tr v-for="sa in mySecondArray">
<td v-for="fa in myFirstArray">
{{ sa.concat('.',fa.a) }}
</td>
</tr>
在这种情况下,控制台说:“sa.concat 不是函数”。我也尝试使用引号,但它只是连接字符串:“sa.KeyOne”。如何使这个最终字符串用作目标而不仅仅是字符串?
解决方案
你可以做这样的事情来得到你的结果,
new Vue({
el: '#app',
data: {
firstArray: [{
a: "KeyOne",
b: "we don't care",
c: "we don't care",
},
{
a: "KeyTwo",
b: "we don't care",
c: "we don't care",
}],
secondArray: [
{
KeyOne: "foo",
KeyTwo: "bar"
},
{
KeyOne: "hello",
KeyTwo: "world"
},
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div id="app">
<table class="table">
<tr>
<th>head1</th>
<th>head2</th>
</tr>
<tr v-for="(sa1, index1) in secondArray" >
<td v-for="(sa2, index2) in secondArray">
{{secondArray[index2][firstArray[index1].a]}}
</td>
</tr>
</table>
</div>
希望这能解决您的问题!
推荐阅读
- javascript - JavaScript 切换语句。以下是正确的js
- listview - WebView 中的超链接与 SfListView 中的滚动指示器冲突
- java - 如何在 Spring Webflux 中将 java.time.Instant 序列化为 ISO 字符串
- xamarin - Calling method from ViewModel cause System.NullReferenceException
- javascript - 在使用 cloud firestore .get() doc.exists 时,即使文档存在,它也始终保持未定义
- python - 重新分区 pyspark 数据帧后无法执行连接
- arrays - 如何使用 jq 获取 {"k":foo, "v":bar} 项的 JSON 列表中的键值?
- reactjs - UseEffect 改变不是立竿见影的吗?但它仍然以某种方式呈现
- html - 以角度创建反应形式时出错
- flutter - 如何在颤动的列内使用 StaggeredGridView?