Using in Loops

There may be times that you are including Vs Vue3 Select within loops of data, such as a table. This can pose some challenges when emitting events from the component, as you won't know which Vs Vue3 Select instance emitted it.

Fortunately, you can solve this problem with an anonymous function. The @input is handled with an inline anonymous function, allowing the selected country to be passed to the updateCountry method with the country and the person object.

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>