I am making a component InputText.vue as follows:
<template>
<div >
<div >
<div >
<h4>Edit Text:</h4>
<textarea cols="50" rows="4" placeholder="Enter text here..." v-model="textBoxInput" @keyup="textChanged"></textarea>
</div>
</div>
</div>
</template>
<script>
export default{
data: function(){
return {
textBoxInput: ""
}
},
methods: {
textChanged: function(){
this.$emit('displayTextChanged', this.textBoxInput);
}
}
}
</script>
Then I am registering and using it in CardFront.vue component as follows:
<style>
.edit-area {
padding: 20px;
height: 800px;
background-color: #d2f9f9;
}
.card-display {
padding: 20px;
height: 800px;
}
</style>
<template>
<div >
<div >
<cc-text-area></cc-text-area>
</div>
<div >
</div>
</div>
</template>
<script>
import TextInput from './TextInput.vue'
export default{
components: {
ccTextArea: TextInput
}
}
<script>
It gives this error: Error
Please help me out. I am using Vue version 2. Whenever I try to refresh the page, it gives error like: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
CodePudding user response:
I am making a component InputText.vue as follows:
Check that the filename and component names match.
If you import TextInput from './TextInput.vue'
in the using component, then also make sure you name your component that, and optionally add a name
property as suggested in the comments.
// TextInput.vue (not InputText.vue)
export default {
name: 'TextInput',
...
}
CodePudding user response:
I solved the issue. Thank you so much everyone for your help. The issue lied in the closing script tag in CardFront.vue component.