Sending a property of an array object from Laravel to Vue

Question

I need to access the name field in an array of objects that I am sending to my Vue component like this:

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

The array looks like this:

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

Once inside my component, I want to extract the name value so that I can store it and pass it along. How should I go about doing this?

The solution provided in this post seems promising, but when I attempt to implement it like so:

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

I only get an undefined result.

Answer 1

Answer №1

If you are working with an array, consider using a different type of loop instead of a for...in loop. You could try a for...of loop:

for (let item of this.editDataItems) {
   console.log(item.name)
}

Alternatively, you can use the forEach method:

this.editDataItems.forEach(item => {
   console.log(item.name);
});

Another option is to use a traditional for loop:

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

Answer 2

If you are working with an array, consider using a different type of loop instead of a for...in loop. You could try a for...of loop:

for (let item of this.editDataItems) {
   console.log(item.name)
}

Alternatively, you can use the forEach method:

this.editDataItems.forEach(item => {
   console.log(item.name);
});

Another option is to use a traditional for loop:

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