User inputs a company's ID number and it will return them a list of addresses that belong to that company split in 3 objects (street, zip code, city).
When they click on one of those addresses, I want the 3 elements of the selected address to be stored in the postData() function:
<template>
<div>
<v-card-text>
<v-row v-if="ask_id">
<v-text-field label="Enter the id_number" v-model="id_number"></v-text-field>
<v-btn
@click="
send_id_number();
show_results()">
</v-btn>
</v-row>
<v-row v-else>
<v-select v-model="res_data"
:items="filteredData" label="Places" :item-text="
(item) => item.street + item.zip_code + item.city">
</v-select>
</v-row>
</v-card-text>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: ["id"],
data() {
return {
ask_id: true,
id_number: null,
res_object: [],
res_data: [],
places: []
};
},
computed: {
filteredData() {
return this.res_object.places
? this.res_object.places.filter((g) => {
return g.places_closed == false;
})
: [];
},
postData() {
let data = {
selected_street: this.?,
selected_zip: this.?,
selected_city: this.?,
id_number: this.?
}
return data
}
},
methods: {
show_results() {
this.mode = false
},
send_id_number() {
axios.get(`https://api.places_url.com/${this.id_number}`)
.then((response) => {
this.res_object = response.data
})
.catch((err) => {
console.log(err)
})
}
},
};
</script>
However whatever I try to do tells me TypeError: undefined is not an object. I'm missing a step but I'm not sure what it is.
structure of the api response:
{
"company_id": 123456789,
"places":[
{"street":"8 main street",
"zip_code":"303",
"city":"RandomCity",
"places_closed":false
},
{"street":"10 main street",
"zip_code":"404",
"city":"RandomCity",
"places_closed":false
},
{"street":"11 main street",
"zip_code":"505",
"city":"RandomCity",
"places_closed":false
}
]
}
you can try something like the below add return-object props in v-select and then you get res_data v-model as an object.
<template>
<div>
<v-card-text>
<v-row v-if="ask_id">
<v-text-field label="Enter the id_number" v-model="id_number"></v-text-field>
<v-btn
@click="
send_id_number();
show_results()">
</v-btn>
</v-row>
<v-row v-else>
<v-select @change="postData()" v-model="res_data"
:items="filteredData" label="Places" :item-text="
(item) => item.street +' '+ item.zip_code +' '+ item.city" return-object>
</v-select>
</v-row>
</v-card-text>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: ["id"],
data() {
return {
ask_id: false,
id_number: null,
res_object:
{
"company_id": 123456789,
"places":[
{"street":"8 main street",
"zip_code":"303",
"city":"RandomCity",
"places_closed":false
},
{"street":"10 main street",
"zip_code":"404",
"city":"RandomCity",
"places_closed":false
},
{"street":"11 main street",
"zip_code":"505",
"city":"RandomCity",
"places_closed":false
}
]
},
res_data: [],
places: []
};
},
computed: {
filteredData() {
return this.res_object.places
? this.res_object.places.filter((g) => {
return g.places_closed == false;
})
: [];
},
},
methods: {
postData() {
console.log(this.res_data);
return this.res_data;
},
show_results() {
this.mode = false
},
send_id_number() {
console.log(this.id_number);
axios.get(`https://api.places_url.com/${this.id_number}`)
.then((response) => {
this.res_object = response.data
})
.catch((err) => {
console.log(err)
})
}
},
};
</script>
Let me know if you want something else
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments