Vue Js：如何从 JSON API 查看对象

Question

在我的 Vue Js 项目中，我有来自 API 的数据，在 JSON 中存储了对象，我无法在我的代码中查看它们。我尝试使用 this.obj =JSON.stringify(this.Flats);，当我使用 console.log 时，我可以看到我所有的数据，但我无法遍历它们以查看 payment 对象

BuildingsService.getAllFlats().then((response) => {
            this.Flats = response.data.response;

       
             this.obj =JSON.stringify(this.Flats);
             console.log(this.Flats,"dataaa")

           
        });

  <div v-for="(object,index) in obj" :key="index"> //didn't work 
                               <span> {{object.flat_number}}   </span>

                                      <span > {{object.payment}}   </span>
                                </div>

Answer 1

您正在捕获 Flats 中的数组，但您正在使用 JSON.stringify 并将结果字符串存储在 obj...然后记录该数组但希望遍历该字符串？

试试这个

BuildingsService.getAllFlats().then((response) => {
    this.Flats = response.data.response;
    this.obj = this.Flats // transforming to a string and duplicating the variable seems kinda pointless btw
});

或者只是遍历你已经存储的数组

<div v-for="(object,index) in Flats" :key="index"> // should work

Answer 2

无法通过 cmets 添加，但可能

无法读取支付属性

错误，因为数组中有一些不包含支付对象的对象。 我相信实施v-if="object.payment" 会解决您的问题。