JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <my-child
    v-for="i in 3"
    :key="i"
    :selected="selected === i"
    @selected="select(i)"
  ></my-child>
</div>

JavaScript

const MyChild = {
  template: `<button @click="show">Client... {{ selected ? 'Show Menu!' : '' }}</button>`,
  props: ['selected'],
  
  methods: {
    show () {
      this.$emit('selected')
    }
  }
}

new Vue({
  el: '#app',
  
  components: {
    MyChild
  },
  
  data () {
    return {
      selected: null
    }
  },
  
  methods: {
    select (i) {
      this.selected = i
    }
  }
})