Question

我有一个带有数组的对象，它只是来自服务器的JSON回复，我将其转换为Object，现在它看起来像这样（但很多值都进入它）： -

Object_return:{
       name:[1,25,2,24,3,78],
       age:[2,34,4,78]
      }

这里的名称和年龄是来自服务器的动态，所以我不知道那里有什么确切的值，所以我不能在迭代for循环时引用它

<th v-for = "item in Object_return.name">

并且我想在DataTable中显示它，所以第一行应该是这样的

         ------------------
                  1 25
                 -------
         name     2 24
                 -------
                  3 78
     --------------------

第二行

    ---------------------
                  2 34
                 -------
         age      4 78
      ------------------------

对于来自服务器的所有值，

依旧等等

有人知道如何做到这一点

Answer 1

您可以iterate over an object并获取键值作为第二个参数。

<tr v-for="val, key in Object_return">

此处，key将是该媒体资源的名称。

然后，由于你想成对地对数组进行分组，我建议使用一个计算属性来将数据按到你想要的格式。

这是一个有效的例子。

＆＃13;

console.clear()

new Vue({
  el: "#app",
  data:{
    serverData: {
       name:[1,25,2,24,3,78],
       age:[2,34,4,78]
      }
  },
  computed:{
    massaged(){
      return Object.keys(this.serverData).reduce((acc, val) => {
        // split each array into pairs
        const copy = [...this.serverData[val]]
        let pairs = []
        while (copy.length > 0)
          pairs.push(copy.splice(0, 2))
        // add the paired array to the return object  
        acc[val] = pairs
        return acc
      }, {})
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="val, key in massaged">
      <td>{{key}}</td>
      <td>
        <table>
          <tr v-for="pair in val">
            <td>{{pair[0]}}</td>
            <td>{{pair[1]}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

＆＃13;

如何遍历Vujs中的数组动态对象

1 个答案: