Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Checkbox List Vue Component</title>
    <style>
        html,
        body {
            font-size: 9pt;
        }
​
        [v-cloak] {
            display: none;
        }
​
        fieldset { 
            width: 320px; 
            padding: 12px;
        }
​
        fieldset div { background-color: #eee; }
    </style>
</head>
​
<body>
    <div id="app" v-cloak>
        <fieldset>
            <legend>Checkbox List (string array options &amp; multi-select)</legend>
            <v-chkbox-list v-model="SelValues1" v-bind:items="StrArrayOptions"></v-chkbox-list>
            <div class="value-view">{{SelValues1}}</div>
        </fieldset>
        <fieldset>
            <legend>Checkbox List (value/text options &amp; exclusive choice)</legend>
            <v-chkbox-list v-model="SelValue2" v-bind:items="ValueTextArrayOptions" v-bind:exclusive="true"></v-chkbox-list>
            <div class="value-view">{{SelValue2}}</div>
        </fieldset>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
    <script>
        //實際應用時，元件會另存成 vue-components-filename.js 方便重複利用
        Vue.component('v-chkbox-list', {
            props: {
                value: [Array,String],
                items: Array,
                exclusive: Boolean
            },
            computed:{
              innerModel:{
                get:function(){
                  return Array.isArray(this.value) ? this.value : [this.value];
                },
                set:function(value){
                  if(this.exclusive) {
                    var lastValue = value.pop();
                    this.$emit('input', lastValue);
                  } else {
                    this.$emit('input', value);
                  }
                }
              }
            },
            template: `
              <span>
                <label v-for="item in items">
                  <input type="checkbox" v-bind:value="item.value || item" v-model="innerModel"  />
                  <span>{{item.text || item}}</span>&#160;&#160;
                </label>
             </span>`
        });
    </script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                StrArrayOptions: ["Value1", "Value2", "Value3"],
                SelValues1: ["Value2"],
                ValueTextArrayOptions: [
                    { value: "Value1", text: "Text1" },
                    { value: "Value2", text: "Text2" },
                    { value: "Value3", text: "Text3" }
                ],
                SelValue2: "Value2"
            }
        });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
milkmidipro
0viewers