Нужна помощь по использованию vue cdn script внутри blade

Question

Привет, ребята, я работаю над проектом Страница регистрации Я хочу использовать V ue cdn и Vue Консоли внутри шаблона лезвия.

Я создаю опцию «Показать и скрыть», но в консолях не отображаются ошибки, но при нажатии кнопки «Показать / скрыть» работает примечание кнопки.

register.blade. php

<div class="form-group form-group-auth @error('password') is-invalid @enderror">
<label for="password">{{ __('Password') }} <span class="text-danger">*</span></label>
<a href="#" data-toggle="modal" data-target="#SecurePw-guide-Modal" class="float-right text-dark text-underline">What is a secure password?</a>
<div class="input-group">
<div class="input-group-prepend">
    <span class="input-group-text"><ion-icon name="lock-closed-outline"></ion-icon></span>
</div><!-- End input-group-prepend -->
<input  :type="passwordType"
        v-model="password"
        id="password" 
        class="form-control form-control-auth"
        name="password"
        placeholder="Password *"
        autocomplete="new-password" />
        <div class="input-group-append">
            <span class="input-group-text">
                <i class="ion" v-bind:class="[passwordIcon]" v-on:click="hidePassword = !hidePassword"></i>
            </span>
        </div><!-- End input-group-append -->
</div><!-- End input-group -->
@error('password')
<div class="invalid-feedback invalid-feedback-msg d-block">
    <p class="mb-0">{{ $message }}</p>
</div>
@enderror
</div><!-- End form-group -->

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const registerForm = new Vue ({
    el: '#registerForm',
    data: function () {
        return {
            password: '',
            hidePassword: true
        }
    },
    computed: {
        passwordType() {
            return this.hidePassword ? 'password' : 'text'
        },
        passwordIcon() {
            return this.hidePassword ? 'ion-md-eye' : 'ion-md-eye-off'
        }
    }
});
</script>
@endsection

Answer 1

Вы хотите присвоить своей группе ввода идентификатор registerForm, чтобы Vue нашел его и прикрепил к нему ваше приложение.

<div class="input-group" id="registerForm">
<div class="input-group-prepend">
    <span class="input-group-text"><ion-icon name="lock-closed-outline"></ion-icon></span>
</div><!-- End input-group-prepend -->
<input  :type="passwordType"
        v-model="password"
        id="password" 
        class="form-control form-control-auth"
        name="password"
        placeholder="Password *"
        autocomplete="new-password" />
        <div class="input-group-append">
            <span class="input-group-text">
                <i class="ion" v-bind:class="[passwordIcon]" v-on:click="hidePassword = !hidePassword"></i>
            </span>
        </div><!-- End input-group-append -->
</div><!-- End input-group -->