Vue.js ドロップダウン コンポーネント付きテキストボックス

<script type="text/x-template" id="ドロップダウン">
    <div class="dropdown" v-if="オプション">
        <!-- ドロップダウン入力 -->
        <input :type="タイプ"
                :disabled="無効"
                v-model="入力値"
                @focus="オプションを表示()"
                @blur="終了()"
                @keyup="キーモニター"
                @input="input_value = inputRule(type)" />
...
</スクリプト>
<スクリプト>
    Vue.component('ドロップダウン', {
        テンプレート: '#dropdown',
        小道具: {
            タイプ: 文字列、
            オプション: 配列、
            無効: ブール値、
            値: 文字列
        },
...
        メソッド: {
            入力ルール:関数(タイプ){
                var 値;
                スイッチ(タイプ){
                    ケース 'テキスト':
                        値 = this.input_value.replace(/[^a-zA-Z0-9]/g,'');
                        壊す;
                    ケース '番号':
                        値 = this.input_value.replace(/^(?![+-]?\d+(\.\d+)?$)/g,'');
                        壊す;
                    ケース「パーセンテージ」:
                        値 = this.input_value.replace(/[^\d]/g,'');
                        値 = 値 > 100 ? '100' : 値;
                        値 = 値 < 0 ? '0' : 値;
                        壊す;
                    デフォルト：
                        console.log("制限なし");
                }
                戻り値;
            },
...
</スクリプト>

<ドロップダウンタイプ = "テキスト"
            :options = "テキストオプション" 
            :value = "テキスト値"
            :disabled = "テキストが無効" 
            @on_change_input_value = "テキスト変更時">
</ドロップダウン>

データ: 関数 () {
    戻る {
        テキスト値: 'ccc',
        text_disabled: 偽、
        テキストオプション: [
            { id: 1、名前: 'a' },
            { id: 2、名前: 'bb' },
            { id: 3、名前: 'ccc' },
            { id: 4、名前: 'dddd' },
            { id: 5, 名前: 'eeeee' },
            { id: 6, 名前: 'fffff ' },
            { id: 7, 名前: 'gggggg' },
            { id: 8、名前: 'hhhhhhh' },
            { id: 9, 名前: 'iiiiiii' },
        ]、
        ...
    }
},
...
メソッド: {
    onTextChange: 関数 (新しいテキスト値) {
        this.text_value = 新しいテキスト値;
    },
...
},