<div class="hero is-large is-light">
<section class="section">
    
        <div class="columns">
            <div class="column"></div>
            <div class="column is-one-third">
                <h1 class="title">
                    My Company
                </h1>
                <p class="subtitle">
                    Subtitle Goes: <strong>Right Here</strong>
                </p>

                <div class="box" id="loginVue">
                    <form asp-action="Login">
                        <div asp-validation-summary="ModelOnly" class="help is-danger"></div>

                        <div class="field">
                            <div class="control">
                                <div class="select">
                                    <select v-model="selected" v-on:change="notNeeded(selected)" required>
                                        <option value="">I am ...</option>
                                        <option value="E">An Employee</option>
                                        <option value="D">A Dealer</option>
                                    </select>
                                </div>
                            </div>
                            <span asp-validation-for="UserType" class="help is-danger"></span>
                        </div>

                        <div class="field">
                            <label asp-for="Username" class="label">Username</label>
                            <div class="control">
                                <input asp-for="Username" v-model.trim="username" class="input" type="text" required />
                            </div>
                            <span asp-validation-for="Username" class="help is-danger"></span>
                        </div>

                        <div class="field">
                            <label asp-for="Password" class="label">Password</label>
                            <div class="control">
                                <input asp-for="Password" v-model.trim="password" class="input" type="password" required />
                            </div>
                            <span asp-validation-for="Password" class="help is-danger"></span>
                        </div>

                        <div class="field">
                            <label asp-for="Account" class="label">Account #</label>
                            <div class="control">
                                <input asp-for="Account" class="input" type="text" v-model.trim="account" :disabled="isDisabled" required/>
                            </div>
                            <span asp-validation-for="Account" class="help is-danger"></span>
                        </div>

                        <div class="field">
                            <div class="control">
                                <input type="submit" value="Login" class="button is-link" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="column"></div>

        </div>
</section>
</div>
Vue.config.devtools = true;    
    new Vue({
        el: '#loginVue',
        data: {
            selected: '',
            account: '',
            toggle: false
        },
        computed: {
            isDisabled() {
                return this.toggle
            }
        },
        methods: {
            notNeeded: function () {
                if (this.selected == "E") {
                    this.toggle = true;
                }
                else {
                    this.toggle = false;
                }
            }
        }
    });
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js