vue boolean radio component

by eglowc

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  
  useFlag:
  <boolean-radio v-model="useFlag" :value="useFlag" :name="'museflag'" :classes="['hello', 'world']">
  </boolean-radio>

  use:
  <boolean-radio 
    v-model="multiFlag.use" 
    :value="multiFlag.use" 
    :dp-true="'사용'" :dp-false="'사용안함'"></boolean-radio>
  
  contain:
  <boolean-radio 
    v-model="multiFlag.contain" 
    :value="multiFlag.contain"       
    :dp-true="'포함'" :dp-false="'미포함'"></boolean-radio>
    
  public:
  <boolean-radio 
    v-model="multiFlag.public" 
    :value="multiFlag.public" 
    :dp-true="'공용'" :dp-false="'개인'"></boolean-radio>
  
  <!--  BINDING VIEW  -->  
  <hr> useFlag:
  <input type="text" v-model="useFlag" />
  <input type="button" @click="reverse" value="반전" /> {{ useFlag }}
  <br/>
  use: {{multiFlag.use}} <br/>
  contain: {{multiFlag.contain}} <br/>
  public: {{multiFlag.public}} <br/>


  <!-- list -->
  <hr>
  <h3>
    list
  </h3>
  <div>
    <label v-for="(value, index) in mylist">
      {{value.id}} :
      <boolean-radio v-model="value.use" :value="value.use" :name="'myuse'+index"></boolean-radio>
      <boolean-radio v-model="value.public" :value="value.public" :name="'mypulbic'+index"></boolean-radio>
    </label>
    <hr>
    <p v-for="item in mylist">
      {{item}}
    </p>
  </div>
   
</div>

JavaScript

Vue.component("boolean-radio", {
  template: '\
  	<div>\
			<input type="radio" :name="name" :checked="check" @click="radio(true)" :class="classes"\/> {{dpTrue}}\
			<input type="radio" :name="name" :checked="!check" @click="radio(false)" :class="classes"\/> {{dpFalse}}\
    </div>',
  props: {
    value: {
      required: false,
      type: Boolean
    },
    name: {
      required: true,
      type: String
    },
    dpTrue: {
      type: String,
      default: "true"
    },
    dpFalse: {
      type: String,
      default: "false"
    },
    classes: {
      type: Array,
      required: false,
      default: function () {
        return []
      }
    }
  },
  methods: {
    radio(bool) {
      this.value = bool
      this.$emit('input', this.value)
    }
  },
  computed: {
    check() {
      if (this.value == 'true') {
        this.value = true
      } else if (this.value == 'false') {
        this.value = false
      }
      return this.value
    }
  }
})

var app = new Vue({
  el: "#app",
  data: {
    useFlag: true,
    multiFlag: {
      "use": true,
      "contain": false,
      "public": false
    },
    mylist: [
    	{"id":1, "use": true, "public": true},
      {"id":2, "use": false, "public": true},
      {"id":3, "use": true, "public": false}
    ]
  },
  methods: {
    reverse() {
      this.useFlag = !this.useFlag
    }
  }
})