Scribd
Upload
5 views2 pages

Applephone Vue

This document is a Vue.js component for displaying a list of Apple phone models with associated images. It includes methods for retrieving image URLs and navigating to a phone services page with selected model and components. The component is styled with CSS for layout and appearance.

Uploaded by

Mayank Verma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views2 pages

Applephone Vue

This document is a Vue.js component for displaying a list of Apple phone models with associated images. It includes methods for retrieving image URLs and navigating to a phone services page with selected model and components. The component is styled with CSS for layout and appearance.

Uploaded by

Mayank Verma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<template>

<div class="hello">
<div class="image-size">
<div class="col-lg-2" v-for="(pic, index) in
variable" :key="pic">
<img class="phone-templates-images"
:src="getImageUrl(pic)" :alt="pic"
@click="navigateToPhoneServices(index)">
<div class="phone-name-div">{{ model_number[index] }}</div>
</div>
</div>
</div>
</template>

<script>
import PhoneData from '@/components/RepairData/PhoneData.js'

export default{
name:'ApplePhones',
data(){
return{
model_number:['Iphone 14','Iphone 14 pro','Iphone 14 pro
max','Iphone 13','Iphone 12','Iphone Se',],
variable:[
'Iphone_14.jpg',
'Iphone_14_pro.jpg',
'Iphone_14_pro_max.jpg',
'Iphone_13.jpg',
'Iphone_12.jpg',
'Iphone_SE.jpg',
],
componentInfo: PhoneData,
};
},
methods:{
getImageUrl(pic){
return require(`@/assets/Phones_img/${pic}`);
},
navigateToPhoneServices(index) {
const selectedModel = this.model_number[index];
const selectedComponents =
this.componentInfo[selectedModel];
console.log('Selected Components:',
selectedComponents);
this.$router.push({
path: '/Phone_Services',
query: {
model: selectedModel,
components: selectedComponents.map(comp =>
comp.name).join(','),
},
});
},
},
}
</script>

<style>
.hello{
background-color: #5e527f;
}
.image-size{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 20px;
}
.phone-templates-images{
display: grid;
width: 180px;
height: 230px;
padding: 10px 10px 10px 10px;
}
</style>

You might also like