Vue〜子コンポーネントのdisabledを親から切り替える方法〜

やりたい事

まず、前提としてこの様なbootstrapのセレクトボックスのcomponentを作り、それを「編集画面」と「閲覧画面」で使いまわしたい。
そのためセレクトボックスのcomponentの、disabledのtrueorfalseを親コンポーネントで切り替えたい。

画面イメージ

コード

        <div class="form-group">
            <label for="exampleSelect1exampleFormControlSelect1">選択の例</label>
            <select class="form-control" id="exampleFormControlSelect1">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>

結論

コード

        <div class="form-group">
            <label for="exampleSelect1exampleFormControlSelect1">選択の例</label>
            <select class="form-control" id="exampleFormControlSelect1" :disabled = "isDisabledCheck(isDisabled)">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>

    export default {
        props: ['isDisabled'],
        methods: {
            isDisabledCheck : function (isDisabled) {
                return isDisabled === 'true'
            }
        }
    }

変更点

htmlに以下を追加

:disabled = "isDisabledCheck(isDisabled)"

vueのmethodsに以下を追加

        methods: {
            isDisabledCheck : function (isDisabled) {
                return isDisabled === 'true'
            }
        }

受け渡された値が文字列のtrueであれば、trueを返す。

悩んだ事

propsを直接適用する

:disabled = "isDisabled"

propsには文字列しか渡せ無かったため、直接適用しても効かなった。。。

computedかmethodsか

悩んだというか一瞬頭に浮かんだのですが、computedに引数を持たせられないので、methodsに決定

最後に

他に良い方法があればぜひコメントいただけると幸いです。