v-对于渲染的组件和<selection>，如何仅对一个组件实例进行更改

Question

我用v-for渲染一些数组元素（从后端得到）。我在每个实例中都有一个选择。当我选择某项时，选择在所有实例中都会发生变化（显然是由于v模型）。如何仅定位一个选择？

<div v-for="bookElement in searchResults.items"              :key="bookElement.id">

 <v-select
  v-model="book.selection"
  :items="book.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> 

Answer 1

就像您使用了vuetifyjs，因此您的选择框必须是这样

 <v-select
    v-model="selectedValue"
    :items="searchResults.items"
    label="Standard"
 ></v-select>

不需要v-for

Answer 2

通过将单独的组件作为搜索结果实例来解决。