javascript - Vuejs 无法引用数组

Question

我无法在 vue js 中引用数组。

  console.log(this.ref_number_response[0]);

这显示我未定义，我想知道为什么......

      data(){
        return{ 
           ref_number_response: [],
     }
},
methods:{
check_ref_number: function () {
             // axios request
             axios.get('/is_referenceNumber_free/'+this.ref_number)
             .then(response => this.ref_number_response.push({ 
                 info: response.data

              }));

        
console.log(this.ref_number_response[0]);
           Event.$emit('reference_added', this.ref_number_response);
             
         },
}

<div class="form-group">
        <label for="" class="col-sm-2 control-label">Ref Number</label>
        <div class="col-sm-10">
            <input v-model="ref_number" type="text" name="ref_number" class="form-control" id="" placeholder="Referent number" @blur="check_ref_number" required>
        </div>
    </div>

这是我得到的响应，我不想使用 v-for 迭代多次来获得实际诊断。

[ { "info": [ { "diagnosis": "St. post. trauma testis sin. Obs Ruptura testis sin." }, { "diagnosis": "diagnosi2" } ] } ]

Answer 1

它显示您未定义，因为 console.log 超出了 promise 。当您控制台记录时， ref_number_response 是一个空数组，并且第一个元素显然未定义。

data(){
     return { 
           ref_number_response: [],
     };
},
methods: {
   check_ref_number() {
             // axios request
             axios.get('/is_referenceNumber_free/'+this.ref_number)
             .then((response) => {
                  console.log(response.data);
                  this.ref_number_response = response.data;
                  console.log(this.ref_number_response); // now its not empty
                  this.$emit('reference_added', this.ref_number_response);
             });
         },
}