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也适用于你。

<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

但我想要这样

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，就好像它是属性一样。

Vue For Loop无法正常工作

1 个答案: