JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <select v-model="selected" @change="onChange">
    <option v-for="city in cities" :key="city.id" :value="city">
      {{ city.name }} - {{ city.country }}
    </option>
  </select>
  <div v-if="selected">
    Selected: {{ selected.id }}, {{ selected.name }}
  </div>
</div>

JavaScript

Vue.createApp({
  data () {
    return {
      cities: [
        { id: 0, name: 'London', country: 'UK', coord: [1, 2] },
        { id: 1, name: 'Paris', country: 'France', coord: [3, 4] }
      ],
      selected: null    
    }
  },
  methods: {
    onChange () {
      console.log('selected: ', this.selected.id, this.selected)
    }
  }
}).mount('#app')