v-for and key : is it a good idea to use md5 to generate a key ?

@martinbean That's what I did, but it didn't work when I tried.

But effectively you're right, now it works ... that means that it didn't work for me but for another reason.

@vincent15000 If your UI wasn’t updating then sounds like your item objects weren’t reactive.

@martinbean Are the components isolated ?

For example if I have on the same page 2 different components : BooksComponent and CategoriesComponent : both display books (that's just to give an example).

So in both components, I will have a loop to display books and I will perhaps have the same :key="'book-'+book.id".

That means that on the same page, I will have two components with the same key.

Is it a problem ?

@vincent15000 The key should identify a record in that specific loop. This is fine:

<ul>
  <li v-bind:key="book.id" v-for="book in books">
    <span>{{ book.name }}</span>
  </li>
</ul>

<ul>
  <li v-bind:key="category.id" v-for="category in categories">
    <span>{{ category.name }}</span>
  </li>
</ul>

Updating say, a single book will only cause the books list to be re-rendered:

const books = ref([
  {
    id: 1,
    name: 'War and Peace',
  },
  {
    id: 2,
    name: 'Nineteen Eighty Four',
  },
]);

// Will cause only books list to re-rendered
books.value[1].name = '1984';

@martinbean Ok so it's not a problem if I have this ?

// component 1
<ul>
  <li v-bind:key="book.id" v-for="book in books">
    <span>{{ book.name }}</span>
  </li>
</ul>

// component 2
<ul>
  <li v-bind:key="category.id" v-for="category in categories">
    <span>{{ category.name }}</span>
	<ul>
		<li v-bind:key="book.id" v-for="book in category.books">
			<span>{{ book.name }}</span>
		</li>
	</ul>
  </li>
</ul>

@martinbean I have to searched again, because the problem is not solved.

With a simple "'book-'+book.id" key, it doesn't work.

I wanted to simplify for the post with books, but the real datas are here.

endpoint.active_connection.state.color

If I write a simple key, it doesn't work.

<component :is="EndpointComponent" :item="endpoint" v-for="(endpoint, index) in endpoints" :key="endpoint.id">
</component>

When the color changes, it is not updated on the screen.

The component is like this.

// Template of the YHexagon component
<y-hexagon
    :borderColor1="endpoint.active_connection.state.color"
>
	<slot></slot>
</y-hexagon>

And here is the template of the YHexagon component.

<div
    class="transition-all hexagon-border-1 absolute"
    :style="hexagonContentBorderStyle1"
></div>

const hexagonContentBorderStyle1 = computed(() => {
    return {
        width: `${calculatedContentBorderBlockWidth.value}px`,
        height: `${calculatedContentBorderBlockHeight.value}px`,
        top: `${calculatedBorderWidth.value}px`,
        left: `${calculatedBorderWidth.value}px`,
        backgroundColor: `${props.borderColor1}`,
    };
});

The calculared values are computed properties.

Is there anything that prevents for a good reactivity ?

Thanks for your help.

Any idea why it doesn't work with a simple key ?

@richardhulbert I'm using VueJS 3 ... just index is good ? I don't know if it's really a good idea.

https://vuejs.org/guide/essentials/list#list-rendering

But I just had a look at the documentation and I will try to update my array objects with any of these methods.

https://vuejs.org/guide/essentials/list#mutation-methods

@richardhulbert

Just tested, but the new datas are not updated on the screen.

And yes I have checked if the array is really updated and it's the case.

@richardhulbert No I have checked only via console.log() ... For any reason, I don't have access to the Vue devtool.

When I read my last comment, I wonder if the problem wouldn't be that the itemsIndexes don't change.

I have tested with changing the itemsIndexes and it works.

So I have a new question and I post it in another post ;).

https://laracasts.com/discuss/channels/vue/v-for-with-object-changes-inside-another-v-for-loop-with-no-change