javascript - Why vue js component does not showing in laravel blade?
问题描述
I am trying to fix the following error from a component, but it's still failing. The error is the following
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
In my password component, following script, I have the following:
<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>
The problem is that the vue component is not loading when the page opens, and the error disappears on refresh.
In laravel blade, I am using it in the following way:
@if($errors->has('password')) :error="'{{$errors->first('password')}}'" @endif></password-input>
In the app.js
I have following script
Vue.component('password-input', require('./components/PasswordInput.vue'));
new Vue({
el: '#app'
});
Can someone guide me on how I fix it? I would appreciate if someone could guide me about this issue.
解决方案
我同意这条线有些奇怪。
@if($errors->has('password')) :error="'{{$errors->first('password')}}'" @endif></password-input>
您是否添加了组件标签的开头部分?IE<password-input @if($errors->has('password')) ...
但我不认为你可以在 Vue 组件中有一个可选的prop,所以如果没有错误,你就不会向 Vue 组件传递任何东西。
也许尝试这样的事情:
<password-input
:error="'{{ $errors->has('password') ? $errors->first('password') : null }}'"
></password-input>
推荐阅读
- java - 为什么会抛出并发修改异常?
- node.js - NodeJs API 提供产品图像的目标路径
- javascript - Fetch API:即使在我的标题中添加“Access-Control-Allow-Origin”:“*”后也没有“Access-Control-Allow-Origin”错误
- mysql - 查询结果为所需格式(MySQL)
- python - **kwargs 在 django 中总是不给任何东西
- android - javaCameraView 在 oneplus3t 上不起作用
- android - Android MPhil 图表:添加标签
- python - Django ORM 查询集将整数字段作为字符串
- three.js - Three.js 阴影不会投射到场景的一部分上
- swift - Int16 发现零