Vue For Loop не работает правильно

1

Я пытаюсь создать логику для работы над массивом объектов, но перед тем, как правильно поставить его в шаблон, у меня возникла проблема. Кто-нибудь знает, как это будет работать. Пример ниже:

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
  • 0
    Вы можете изменить свой arrayElement ?
  • 0
    Нет, я хочу отобразить в строке один элемент с несколькими значениями, как показано выше, поэтому все похожие имена, например, xy, должны отображать все значения, связанные с ним
Теги:
vue.js

1 ответ

1
Лучший ответ

Вы должны построить еще одну коллекцию, которая является "рассчитанной" стоимостью. Затем вы можете использовать эту коллекцию для итерации в соответствии с вашими потребностями.

Например,

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

Edit: добавлена простая 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 как будто это свойство.

Поделиться
  • 0
    Можете ли вы дать мне хит, как создать эту коллекцию?
  • 0
    Это работает :)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню