VueJS - 如何使用胡须构建动态值？答案

【问题标题】：VueJS - how build dynamic values, using the mustaches?VueJS - 如何使用胡须构建动态值？
【发布时间】：2021-10-31 04:14:48
【问题描述】：

在数据中，我有 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”。如何使这个最终字符串用作目标而不仅仅是字符串？

【问题讨论】：

这不行吗？ {{ sa }} {{ fa.a }}
{{ sa }} {{ fa.a }} 显示所有“sa”对象，后跟我要定位的列的好名称，如下所示： {KeyOne: "foo",KeyTwo: "bar"}KeyOne

标签： arrays vue.js object concatenation mustache

【解决方案1】：

你可以这样做来得到你的结果，

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>

希望这能解决您的问题！

【讨论】：