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
        }
    ]
}

CodePudding user response：

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