JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <current-currency @change-current-currency="changeCurrentCurrency"></current-currency>
</div>

JavaScript

const { ref, watch } = Vue

const CurrentCurrency =  {
  emits: ['change-current-currency'],

  template: `
    <h1>{{currency}} hoje</h1>
    <select v-model='currency'>
      <option value="Dolar">Dolar</option>
      <option value="Euro">Euro</option>
    </select>
  `,

  setup(props, { emit }){
    const currency = ref('Dolar');

    watch(currency, () => {
      emit('change-current-currency', currency.value)
    })

    return { currency }
  }
}


const app = Vue.createApp({
  components: {
    CurrentCurrency,
  },
  setup(){
    const changeCurrentCurrency = value => {
      console.log(value)
    }
    
    return {
      changeCurrentCurrency
    }
  }
})

app.mount('#app')