Passing an array object property from Laravel in Vue

Question

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.

@BoussadjraBrahim well $article->tags retrieves all tags related to said article from my tables. the Tags method is : -> return $this->belongsToMany(Tag::class)->withTimestamps(); <- In article model — EricTalv
– EricTalv, Commented Dec 3, 2020 at 19:28

Dan · Accepted Answer · 2020-12-03 19:33:58Z

0

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)
}

answered Dec 3, 2020 at 19:28

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1