CODEWITHSUNDEEP
vue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9859

Can't print value from array of objects

Here I am filling the localStorage:

let storageObj = {};
storageObj.date = (new Date().toLocaleString().replace(", ","T"));
storageObj.url = this.responseURL;
localStorage.setItem(storageObj.date, storageObj.url);

In mounted() I am iterate all data from localStorage like:

for(let obj of Object.entries(localStorage))
{
    this.lastpasts.push(obj);
}

And placing every Object to lastpasts (located in data() {lastpasts : []}).

In template I want to print only url:

<div class="ui divided items" v-for="el in lastpasts">
    <div class="item">
    {{el.url}}
     </div>
</div>

But this code do not print nothing. Work only {{el}}. It's print in HTML block:

[ "24.06.2017T11:55:10", "362e9cc5-e7e6" ]
[ "24.06.2017T12:26:47", "b0f9f20d-7851" ]

Browser console do not have any errors.

Upvotes: 0

Views: 942

Answers (1)

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13644

In the chat session we managed to solve his issue.

It was caused by the fact, that he was using Array of Arrays instead of Array of Objects. Because Array can be used only with index, not field name, {{el.url}} was not working.

The code to get values from LocalStorage had to be changed to:

mounted() { 
  for(let obj of Object.entries(localStorage)) { 
    var x = {}; 
    x.url = obj[0]; 
    x.date = obj[1]; 
    this.lastpasts.push(x);    
  } 
}

Now, it is possible to use {{el.url}}

Upvotes: 3

Related Questions