PropertyDetails.vue
2.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<script setup>
const props = defineProps({
formData: {
type: null,
required: true,
},
})
const emit = defineEmits(['update:formData'])
const radioContent = [
{
title: 'Sell the property',
desc: 'Post your property for sale. Unlimited free listing.',
icon: 'ri-money-dollar-circle-line',
value: 'sell',
},
{
title: 'Rent the property',
desc: 'Post your property for rent. Unlimited free listing.',
icon: 'ri-home-6-line',
value: 'rent',
},
]
const formData = ref(props.formData)
watch(formData, () => {
emit('update:formData', formData.value)
})
</script>
<template>
<VForm>
<VRow>
<VCol cols="12">
<!-- 👉 Property Deal Type -->
<CustomRadiosWithIcon
v-model:selected-radio="formData.propertyDealType"
:radio-content="radioContent"
:grid-column="{ cols: '12', sm: '6' }"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Property Type -->
<VSelect
v-model="formData.propertyType"
label="Property type"
placeholder="Select Property Type"
:items="['Residential', 'Commercial']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Zip Code -->
<VTextField
v-model="formData.zipCode"
label="Zip Code"
type="number"
placeholder="123456"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Country -->
<VSelect
v-model="formData.country"
label="Country"
placeholder="Select country"
:items="['India', 'UK', 'USA', 'AUS', 'Germany']"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 State -->
<VTextField
v-model="formData.state"
label="State"
placeholder="California"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 City -->
<VTextField
v-model="formData.city"
label="City"
placeholder="Los Angeles"
/>
</VCol>
<VCol
cols="12"
sm="6"
>
<!-- 👉 Landmark -->
<VTextField
v-model="formData.landmark"
label="Landmark"
placeholder="Near to bus stop"
/>
</VCol>
<VCol>
<!-- 👉 Address -->
<VTextarea
v-model="formData.address"
label="Address"
placeholder="112, 1st Cross, 1st Stage, 1st Phase, BTM Layout, Bangalore - 560068"
/>
</VCol>
</VRow>
</VForm>
</template>