时间戳

首页 > 解决方案 > Vue.js：访问数组中的第一项不起作用

javascript - Vue.js：访问数组中的第一项不起作用

问题描述

我正在尝试从以下 json 数组订阅第一个对象。

"data" : [ {
      "registrationNumber" : "1234",
      "vehicleMake" : "B.M.W.",
      "vehicleModel" : "R1100 S",
      "cylinderCapacity" : "1100",
      "typeOfFuel" : "Petrol",
      "colour" : "Blue",
      "dateOfFirstRegistration" : "Wed Feb 18 00:00:00 GMT 2000"
    } ]

这是在之前的 json 结构下可以正常访问数据的vehicle.js，它没有使用数组来存储对象（只会是单个的）。

  export function getVehicleEnquiry({ regNumber }) {
  return axios.post(`${API}/VehicleLookup`, {
    fieldname: 'registrationNumber',
    value: regNumber,
  }).then(data => ({
    data: {
      regNumber: data.registrationNumber,
      make: data.vehicleMake,
      model: data.vehicleModel,
      firstRegistered: data.dateOfFirstRegistration,
      capacity: data.cylinderCapacity,
      fuelType: data.typeOfFuel,
      color: data.colour,
    },
  }));
}

标签： javascriptvue.js

解决方案

由于您的响应现在包含一个数组，因此无法直接访问该对象。[0]你指的是数组的第一个索引，它“包含”你正在寻找的对象。

更改data为data[0]：

data: {
      regNumber: data[0].registrationNumber,
      make: data[0].vehicleMake,
      model: data[0].vehicleModel,
      firstRegistered: data[0].dateOfFirstRegistration,
      capacity: data[0].cylinderCapacity,
      fuelType: data[0].typeOfFuel,
      color: data[0].colour,
    },

推荐阅读