81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout:"custom"
|
|
});
|
|
|
|
const {makes} = useCars();
|
|
|
|
const info = useState('adInfo',() => {
|
|
return {
|
|
make:'',
|
|
model:"",
|
|
year:"",
|
|
miles:"",
|
|
price:"",
|
|
city:"",
|
|
seats:"",
|
|
features:"",
|
|
description:"",
|
|
image:null
|
|
}
|
|
});
|
|
|
|
const onChangeInput = (data, name) => {
|
|
info.value[name] = data;
|
|
};
|
|
|
|
const inputs = [
|
|
{
|
|
id:1,
|
|
title:"Model *",
|
|
name:"model",
|
|
placeholder:"Civic"
|
|
},
|
|
{
|
|
id:2,
|
|
title:"Year *",
|
|
name:"year",
|
|
placeholder:"2020"
|
|
},
|
|
{
|
|
id:3,
|
|
title:"Miles *",
|
|
name:"miles",
|
|
placeholder:"10000"
|
|
},
|
|
{
|
|
id:4,
|
|
title:"City *",
|
|
name:"city",
|
|
placeholder:"Austin"
|
|
},
|
|
{
|
|
id:5,
|
|
title:"Number of Seats *",
|
|
name:"seats",
|
|
placeholder:"5"
|
|
},
|
|
{
|
|
id:6,
|
|
title:"Features *",
|
|
name:"features",
|
|
placeholder:"Leather Interior, No Accidents"
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="mt-24">
|
|
<h1 class="text-6xl mt-24">Create a new Listing</h1>
|
|
</div>
|
|
<div class="shadow rounded p-3 mt-5 flex flex-wrap justify-between">
|
|
<CarAdSelect title="Make *" :options="makes" name="make" @changeInput="onChangeInput"/>
|
|
<CarAdInput v-for="input in inputs" :key="input.id" :title="input.title" :name="input.name"
|
|
:placeholder="input.placeholder"
|
|
@changeInput="onChangeInput"/>
|
|
<CarAdTextarea title="Description *" name="description"/>
|
|
<CarAdImage title="Image *" @changeInput="onChangeInput"/>
|
|
</div>
|
|
</div>
|
|
</template> |