需要有关在 blade 中使用 vue cdn 脚本的帮助

Question

大家好，我正在处理项目注册页面，我想在blade 模板中使用Vue cdn 和 Vue 控制台。

我创建了显示和隐藏选项，但在控制台中没有显示错误，但是当我单击显示/隐藏按钮时，请注意工作。

寄存器.刀片.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的 id 以便 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 -->