Passing an array object property from Laravel in Vue

I am sending an article->tags array of objects to my Vue component like so:

<article-form
    :edit-data-tags="{{ $article->tags }}"
></article-form>

I get this array:

[  0: { id:'1', name:'mytag' } ... ]

Now in my component, I want to get to the name field so I can store it and pass it onwards. How can i do this?

this post has the same problem, but when i try this solution:

created: function () {
   for (let tag in this.editDataTags) {
      console.log(tag.name)
   }
}

I get an undefined.

Answer

for...in loops are for objects, but you have an array. Try a for...of loop:

for (let tag of this.editDataTags) {
   console.log(tag.name)
}

or forEach:

this.editDataTags.forEach(tag => {
   console.log(tag.name);
});

or for loop:

for (let i=0; i < this.editDataTags.length; i++) {
   console.log(this.editDataTags[i].name)
}