[Vuejs]-Custom radio component in latest Vue would not function at all in latest Safari

by

1👍

const Wrapper = Vue.component("Wrapper", {
  props: ["options", "activeIndex"],
  template: `<div>
  <div v-for="(item, index) in options" class="item" :class="{active: index === activeIndex}" @click="$emit('input', index)">{{item.name}}</div>
  </div>`,
});

new Vue({
  el: "#app",
  template: `<div>
  <Wrapper :options="options" :activeIndex="activeIndex" v-model="activeIndex"></Wrapper>
  </div>`,
  data() {
    return {
      options: [
        { id: "two", name: "Investor", checked: true },
        { id: "one", name: "Entrepreneur", checked: false }
      ],
      activeIndex: -1
    };
  },
  created() {
    this.activeIndex = this.options.findIndex(i => i.checked);
  }
});
body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  width: 100px;
  border: 1px solid;
  padding: 10px;
}
.item.active{
  background-color: rgba(0,0,0, 0.3);
}
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <div id="app"></div>
👤Dmytro

Leave a comment