How can I modify the selection in each instance separately when rendering elements of an array obtained from the backend using v-for? Currently, changing one selection affects all instances due to the v-model. Is there a way to target only one selection without affecting others?
<div v-for="bookElement in searchResults.items" :key="bookElement.id">
<v-select
v-model="bookElement.selection"
:items="bookElement.items"
label="Add to list"
></v-select>
</div>
<script>
export default {
data() {
return {
book: {
title: null,
author: null,
genre: null,
description: null,
bookImage: null,
googleBooksId: null,
listType: null,
selection: null,
items: ["Reading now", "Want to read", "Finished"]
}
};
},
</script>