[Vuejs]-How to merge 2 objects Vue.Js

by

1👍

✅

You can’t really use v-if and v-for on the same element. Best to put the v-if on a parent element.
After that, try to put this:

<tr v-for="(category, index) in categories" :key="index">
  <td>{{index + 1}}</td>
  <td>{{category.title}}</td>
  <td v-if="category.parent_id">{{ getParent(category.parent_id) }}</td>
  <td>{{ new Date(category.created_at).toLocaleString('ru-RU')}}</td>
  <td></td>
</tr>

And method:

getParent(childrenParentId) {
  // Check if exist parent or was deleted
  return this.categories.find(cat => childrenParentId === cat.id)
    ? this.categories.find(cat => childrenParentId === cat.id).title
    : "Parent was deleted and not exist";
}

Maybe its better to add a method with that code and call when render.

Find search first occurrence in your array of dicts and return that object.

Its important that if not exist parent will crash (you cant search [‘title’] of undefined) so you will have to delete in cascade parent to childrens or remove in childrens that parent.

Codesandbox with test working:
https://codesandbox.io/s/jolly-bas-6uhkx

👤NBlack

Leave a comment