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>
The problem is that it is not finding the reference when calling the component, you are calling it in camel case and you have it defined in pascal case when importing it, it is just modifying it.
Your list of components would look like this