Применение в циклах

Могут быть случаи, когда вы включаете Vs Vue3 Select в циклы данных, такие как таблица. Это может создать некоторые проблемы при отправке событий из компонента, поскольку вы не будете знать, какой экземпляр Vs Vue3 Select его отправил.

Вы можете решить эту проблему с помощью анонимной функции. @input обрабатывается встроенной анонимной функцией, позволяющей передавать выбранную страну методу updateCountry вместе со country и объектом person.

Name	Country
John	Loading...
Jane	Loading...

<template>
  <table>
    <tr>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr v-for="person in people" :key="person.name">
      <td>{{ person.name }}</td>
      <td>
        <v-select
          :options="countries"
          :value="person.country"
          @input="(country) => updateCountry(person, country)"
        />
      </td>
    </tr>
  </table>
</template>

<script setup>
import countries from '../data/countries'
const people = [
  { name: 'John', country: '' },
  { name: 'Jane', country: '' },
]
const updateCountry = (person, country) => {
  person.country = country
}
</script>

<style scoped>
table {
  display: table;
  width: 100%;
}
</style>