You can begin to build the product listing page and implement the categories menu as depicted in this diagram by following these next steps:
- Create the folder
/src/components/market. - Implement the
CategoryMenyItemcomponent:- Create the file
/src/components/market/CategoryMenuItem.vue - Write the following code:
- Create the file
<template>
<div class="container" @click="onSelected" :class="{selected: checked}">
<span>{{ categoryName }}</span>
</div>
</template>
<script>
export default {
name: 'CategoryMenuItem',
props: {
categoryName: String,
checked: Boolean,
},
methods: {
onSelected: function() {
this.$emit('selected', this.categoryName);
},
},
}
</script>
<style scoped>
.container {
display: inline;
padding: 5px 3px 5px 3px;
border: 1px solid black;
padding: 2px 5px 2px 5px;
cursor: pointer;
}
.container:hover {
background-color: lightgray;
}
.selected {
background-color: bisque...