[Vue.js] select を使用するときに文字列ではなくブール値を返す方法

bool とバインディングする場合、チェックボックスを使用する場合が多いのかもしれませんが、セレクトボックスを使う方法です。

<div id='app'>
    <select v-model="boolean" v-on:change='print'>
        <option v-bind:value='true'>Yes</option>
        <option v-bind:value='false'>No</option>
    </select>
</div>

new Vue({
    el: '#app',
    data: {
        boolean: false
    },
    methods: {
        // 確認用
        print: function () {
            alert(this.boolean);
        }
    }
})

参考 URL

• https://forum.vuejs.org/t/how-to-return-boolean-and-not-string-when-using-select/14672
• https://stackoverflow.com/questions/45264923/how-to-return-boolean-and-not-string-when-using-select