Question

我正在尝试让我的组件接受json数据，而我无法事先知道数组名称或字段名称

例如，如果是

 "user": [  
      {
        "id": "1",
        "userid": "asdad@asd.dsfsdf",
        "name": "Bob"
      },
      {
        "id": "2",
        "userid": "sdfsdf@asd.sdf",
        "name": "Trev"
      }
 ]

我还将传递一些元数据，该元数据将指定名称和字段。例如

{
   name: 'user',
   columns: [
    "userid",
    "name"
  ]
}

如果我对其进行硬编码例如

<tr v-for="row in IncomingData.user">
    <td>{{ row.userid }}</td>
    <td>{{ row.name }}</td>
</tr>

它可以工作，但是我不想硬编码。我试着看看是否可以使用字符串指定v-for 例如

   <tr v-for="row in eval('IncomingData.user')">

但这不起作用。如何在vue.js模板中动态指定事物的名称

Answer 1

如果有多个元素，例如users，则“其他”可以使用另一个外部循环

<template v-for="inner in IncomingData">
    <tr v-for="row in inner">
        <td>{{ row.userid }}</td>
        <td>{{ row.name }}</td>
    </tr>
</template>

如果只有一个元素，让我们说users，而您只想获取第一个未知密钥，则使用

    <tr v-for="row in IncomingData[Object.keys(IncomingData)[0]]">
        <td>{{ row.userid }}</td>
        <td>{{ row.name }}</td>
    </tr>

new Vue({
  el:"#app",
  data:{
  IncomingData:{
    "user": [  {
        "id": "1",
        "userid": "asdad@asd.dsfsdf",
        "name": "Bob"
      },
      {
        "id": "2",
        "userid": "sdfsdf@asd.sdf",
        "name": "Trev"
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

By Inner Loop
<table width="100%">
<tr style="text-align:left;">
        <th>User Id</th>
        <th>Name</th>
</tr>
<template v-for="inner in IncomingData">
    <tr v-for="row in inner">
        <td>{{ row.userid }}</td>
        <td>{{ row.name }}</td>
    </tr>
</template>
</table>
<br/><br/>
By getting first key name
<table width="100%">
<tr style="text-align:left;">
        <th>User Id</th>
        <th>Name</th>
</tr>
<tr v-for="row in IncomingData[Object.keys(IncomingData)[0]]">
    <td>{{ row.userid }}</td>
    <td>{{ row.name }}</td>
</tr>
</table>

</div>

Answer 2

您可以使用IncomingData[varName]，其中varName是您要使用的动态名称（例如user或其他任何名称）。

具有动态名称的Vue.js v-for

2 个答案: