How to render a map of maps in vue

Question

I created a map of maps like below:

{year1:{topic1:[article1,article2]},year2:{topic1:{article3}}}

I tried to use v-for to iterate this map but failed.

When I print in the template I see the following:

{ "Map(1)": { "2016 =>": { "Map(2)": { "Conference =>": [1], "Journal =>": [ 2, 3 ] } } } }

I use the following code to generate this map:

            var result = new Map()
            for (var t in temparray){
                var object = this.papers[temparray[t]]
                var year = object.year
                var tt = object.type
                if (result.get(year) ==undefined){
                    var a = new Map()
                    a.set(tt,[temparray[t]])
                    result.set(year, a)
                }
                else{
                    var inner = result.get(year)
                    if (!inner.has(tt)){
                        inner.set(tt,[temparray[t]])
                    }
                    else{
                        inner.get(tt).push(temparray[t])
                        
                    }
                }
            }
            this.selectedPapers = result

I expect the map to be something like this:

{"2016":{"Conference":[1]}} 

Answer 1

I figured it out. to loop a map, I must use [key, value] instead of (key, value). I couldn't find any documentation for that but it solved my issue.