为啥 vue js 组件没有显示在 laravel 刀片中？

Posted 2023-02-23

【中文标题】为啥 vue js 组件没有显示在 laravel 刀片中？

【英文标题】：Why vue js component does not showing in laravel blade?为什么 vue js 组件没有显示在 laravel 刀片中？

【发布时间】：2019-07-08 01:54:55

【问题描述】：

我正在尝试修复组件中的以下错误，但它仍然失败。错误如下

[Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

在我的密码组件中，按照脚本，我有以下内容：

<template>
    <div class="form-group form-material floating" data-plugin="formMaterial">
        <input id="password" type="password" class="form-control" name='password'>
        <label class="floating-label">Create password</label>

        <span class="password-info"><i class="fa fa-info-circle"></i></span>
        <div class="password-rules">minimum 6 characters</div>

        <span v-if="this.error != null" :class="['invalid-feedback', 'inline': this.error != null]">
             <strong> error </strong>
        </span>
    </div>

</template>

<script>
    import Password from 'password-strength-meter'

    export default
        props: ['error'],

        mounted: function()
            const $password = $('#password', this.$el);

            $password.password(
                showText: false,
                animate: true,
            );
        
    
</script>

<style lang="scss">
    @import '~password-strength-meter/dist/password.min.css';

</style>

问题是页面打开时vue组件没有加载，刷新后错误消失。

在 laravel Blade 中，我是这样使用的：

@if($errors->has('password')) :error="'$errors->first('password')'" @endif></password-input>

在 app.js 中

我有以下脚本

Vue.component('password-input', require('./components/PasswordInput.vue'));

new Vue(
    el: '#app'
);

有人可以指导我如何解决它吗？如果有人能指导我解决这个问题，我将不胜感激。

【参考方案1】：

我认为这段代码在语法上不正确，或者您可能遗漏了代码的某些部分：

@if($errors->has('password')) :error="'$errors->first('password')'" @endif></password-input>

可能是这样的：

<password-input>
   if($errors->has('password')) :error="'$errors >first('password')'" @endif 
</password-input>

【参考方案2】：

我同意这条线有些奇怪；

@if($errors->has('password')) :error="'$errors->first('password')'" @endif></password-input>

您是否添加了组件标签的开头部分？ IE。 <password-input @if($errors->has('password')) ...

---

但我认为您不能在 Vue 组件中拥有 optional 属性，因此如果没有错误，您就不会向 Vue 组件传递任何内容。

不妨试试这样的：

<password-input
    :error="' $errors->has('password') ? $errors->first('password') : null '"
></password-input>