mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
Jeff Sagal
47 lines
790 B
Vue
47 lines
790 B
Vue
<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="options"
|
|
:value="person.country"
|
|
@input="(country) => updateCountry(person, country)"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
import countries from '../data/countries'
|
|
|
|
export default {
|
|
data: () => ({
|
|
people: [
|
|
{ name: 'John', country: '' },
|
|
{ name: 'Jane', country: '' },
|
|
],
|
|
}),
|
|
computed: {
|
|
options: () => countries,
|
|
},
|
|
methods: {
|
|
updateCountry(person, country) {
|
|
person.country = country
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
table {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
</style>
|