如何将API返回的用户选择地址值存入变量？解决TypeError报错

问题描述 #

用户输入公司ID后，API返回该公司的地址列表（每个地址包含street、zip_code、city字段），点击选择其中一个地址后，需要将这三个字段存入postData函数，但操作时始终出现TypeError: undefined is not an object报错。

错误原因分析 #

1. res_object初始化类型错误：data里res_object初始化为数组[]，但API返回的是包含places数组的对象。页面初始化时计算属性filteredData访问this.res_object.places，数组没有places属性，直接触发undefined报错。
2. show_results方法逻辑错误：方法里修改this.mode，但data中未定义mode变量，应该通过修改ask_id切换显示状态。
3. res_data初始化类型错误：res_data初始化为数组[]，但v-select选中的是单个地址对象，应该初始化为null或{}，否则访问选中对象属性时会出错。
4. postData计算属性未正确绑定数据：占位符this.?未对应选中地址的属性，需要从选中的res_data中取值。

修复后的完整代码 #

<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: {}, // 改为对象初始化，匹配API返回结构
        res_data: null, // 改为单个对象初始化，对应v-select选中的单个地址
        places: []
      };
    },
    computed: {
        filteredData() {
        // 用可选链操作符避免空值访问报错，同时过滤已关闭的地址
        return this.res_object?.places?.filter(g => !g.places_closed) || [];
      },
      postData() {
        // 从选中的地址对象中取值，添加默认值防止未选中时出现undefined
        let data = {
            selected_street: this.res_data?.street || '',
            selected_zip: this.res_data?.zip_code || '',
            selected_city: this.res_data?.city || '',
            id_number: this.id_number || ''
        }
        return data
      }
    },
    methods: {
      show_results() {
        // 修改ask_id切换输入框与选择框的显示状态
        this.ask_id = 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>

关键修复点说明 #

• 将res_object初始化为{}，避免数组访问对象属性的错误；
• filteredData中使用可选链操作符?.，防止res_object为空时访问places报错；
• show_results方法改为修改ask_id，正确切换输入框和选择框的显示；
• res_data初始化为null，匹配v-select选中单个对象的逻辑；
• postData中通过this.res_data?.xxx取值并添加默认值，避免未选中地址时出现undefined；
• 优化v-select的item-text，用模板字符串拼接地址，显示更友好。

内容的提问来源于stack exchange，提问作者user16779293