Vue For 循环无法正常工作

Question

我正在尝试创建一个逻辑来运行对象数组，但我在将其正确放入模板时遇到了问题，有谁知道它将如何工作，示例如下：-

arrayElement: [
              {"name":xy,"age":1},
              {"name":xy,"age":2},
              {"name":xy,"age":3},
              {"name":xy,"age":4},
              {"name":yz,"age":1},
              {"name":yz,"age":2},
              {"name":u,"age":1},
              {"name":u,"age":2},
                   ] 

这是数组，现在我想显示数据表中的元素，但 xy 应该具有与之关联的所有元素，并且 yz 也同样适用于 u。

<template slot="items" slot-scope="props">
  <div>{{props.item.name}}</div>
  <div v-for="item in items"> <input>{{props.item.age}}</input></div>
</template>

我正在做这样的事情，但它给了我这样的每一行

xy 1
xy  2
xy  3
xy  4

但我想要这样的

xy    1
      2
      3
      4

yz    1
      2

 u    1
      2

Answer 1

您必须构建另一个“计算”值的集合。然后，您可以根据需要使用该集合进行迭代。

例如，

{
xy: [1,2,3,4],
yz:  [1,2],
u: [1]
}

编辑：添加了如何转换它的纯 JS 版本。 您可以使用它并创建一个 Vue 计算属性。

//Data
var orig = [
              {"name":'xy',"age":1},
              {"name":'xy',"age":2},
              {"name":'xy',"age":3},
              {"name":'xy',"age":4},
              {"name":'yz',"age":1},
              {"name":'yz',"age":2},
              {"name":'u',"age":1},
              {"name":'u',"age":2}
                   ];

//Define function
function makeMultimap(input){
  var out = {}; //Object ~ Dictionary ~ HashMap
  for(var i=0;i<input.length;i++){
    var row = input[i];
    var name = row.name;
    var age = row.age;
    var outVal = out[name];
    if(outVal==undefined){
      out[name] = [];
      outVal = out[name];
    }
    outVal.push(age);
  }

  console.log(input);
  console.log(out);
}

//Execute by passing data
makeMultimap(orig);

在 Vue 中是这样的：

computed:{
 arrayMultiMap: function(input){
      var out = {}; //Object ~ Dictionary ~ HashMap
      for(var i=0;i<input.length;i++){
        var row = input[i];
        var name = row.name;
        var age = row.age;
        var outVal = out[name];
        if(outVal==undefined){
          out[name] = [];
          outVal = out[name];
        }
        outVal.push(age);
      }

      console.log(input);
      console.log(out);

      return out;
    }
}

现在您可以像使用属性一样使用arrayMultiMap。