I have a question regarding vue.js In the app.vue file I can import a component using Pascal case and then call it with kebab-case, but in the child of that component this vue convention no longer works.
For example in the app.vue file I use: import ListView from './listView.vue' and I can use it as <list-view"/> in the DOM. However if in the ListView.vue component where I want to import listItem on import as I import ListItem from "./listItem.vue", I get an Uncaught ReferenceError: listItem is not defined error in the console because I can't use kebab-case () in the DOM and it doesn't recognize it.
app.vue:
<template>
<div class="todoListContainer">
<div class="heading">
<h2 id="title"> Todo List</h2>
<add-item-form/>
</div>
<list-view :items="items"/>
</div>
</template>
<script>
import addItemForm from "./addItemForm.vue";
import ListView from './listView.vue';
export default{
components:{
addItemForm,
ListView,
// ListItem
},
data: function(){
return{
items: []
}
},
methods:{
getList(){
axios.get('api/items')
.then(response=>{
this.items = response.data
})
.catch(error=>{
console.log(error);
})
}
},
created(){
this.getList();
}
}
</script>
ListView.vue
<template>
<div>
<div v-for="(item,index) in items" :key="index">
<list-item
:item="item"
/>
</div>
</div>
</template>
<script>
import ListItem from "./listItem.vue";
export default {
props: ['items'],
components:{
listItem
}
}
</script>