하고 싶은 일

우선, 전제로서 이런 bootstrap의 셀렉트 박스의 component를 만들어, 그것을 「편집 화면」과 「열람 화면」으로 사용 돌리고 싶다.
따라서 선택 상자의 구성 요소, disabled true or false

화면 이미지

코드

        <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에 결정

마지막으로

그 밖에 좋은 방법이 있으면 꼭 코멘트 받을 수 있으면 다행입니다.