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

Question

在数据方面，我有 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 对象]。

我试过了：

<tr v-for="sa in mySecondArray">
  <td v-for="fa in myFirstArray">
    {{ sa.concat('.',fa.a) }}
  </td>
</tr>

在这种情况下控制台说：“sa.concat 不是函数”。我也试过用引号，但它只是连接字符串：“sa.KeyOne”。如何使这个最终字符串用作目标而不仅仅是一个字符串？

Answer 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>

希望这能解决您的问题！

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

VueJS - how build dynamic values, using the mustaches?

arrays

concatenation

object

mustache

vue.js