As a Vue beginner, I ventured into creating a custom component and attempted to bind everything just like in the basic Vue CLI template. Here is my code snippet.
Circle.vue
<template>
<div :style="custom">
</div>
</template>
<script>
export default {
name:'Circle',
props:{
size:String,
color:String
},
computed:{
custom(){
return {
background:this.color,
height:this.size,
width:this.size
}
}
}
}
</script>
Within my View.vue file
<script>
// :class="['']"
import Circle from '@/components/Circle.vue'
export default {
name: "Landing",
components:{
Circle
}
};
</script>
My attempt at using it looks like this
<Circle size="100px" color="#222222"/>
I also tried printing the props as is, but that didn't work either.
<template>
<div :style="custom">
{{size}} {{color}}
</div>
</template>
After implementing this, nothing appeared on the screen. I sought guidance from here for help.
Thank you for your time!