Key

As you might expect, the DOM nodes generated byv-for="amenity in amenities"are reactively bound to theamenitiesarray. If the content ofamenitieschanges, Vue will automatically re-render the nodes to reflect the change.

When usingv-for, it's recommended you provide a uniquekeyproperty to each item in the list. This allows Vue to target the exact DOM nodes that need to be changed, making DOM updates more efficient.

Usually, the key would be a numeric ID, for example:

<p v-for="item in items" v-bind:key="item.id">
  {{ item.title }}
</p>

For the amenities and prices lists, the content is not going to change over the life of the app, so there's no need for us to provide a key. Some linters may warn you about this, but in this case, the warning can be safely ignored.