Как получить значение ключа из объекта внутри массива

Question

Я пытаюсь получить имя продавца из следующего массива:

[
  {
    "model": "inventory.merchant",
    "pk": 1, 
    "fields": {
      "merchant_name": "Gadgets R Us",
      "joined": "2020-01-06T07:16:17.365Z"
    }
  },
  {"model": "inventory.merchant", "pk": 2, "fields": {"merchant_name": "H&M", "joined": "2020-01-07T22:21:52Z"}},
  {"model": "inventory.merchant", "pk": 3, "fields": {"merchant_name": "Next", "joined": "2020-01-07T22:22:56Z"}},
  {"model": "inventory.merchant", "pk": 4, "fields": {"merchant_name": "Jill Fashion", "joined": "2020-01-07T22:26:48Z"}}
]

Я использую vuejs и использую топор ios для получения вышеуказанных данных через API. Я положил в массив под названием merchants[]. Я могу получить любой элемент из моего html, используя v-for, т.е.

<div v-for="merchant in merchants">
  <p>{{ merchant.fields.merchant_name }}</p>
</div>

Однако в моем файле. js выполнение следующих действий не работает:

console.log(this.merchants[0].fields.merchant_name)

В моей консоли появляется следующая ошибка:

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'fields' of undefined"

Пожалуйста, помогите

Редактировать: Это мой. js файл. Я пытаюсь зарегистрировать имя продавца в консоли из вычисляемого свойства merchantName():

new Vue({
  delimiters: ['[[', ']]'],
  el: "#inventory",

  data: {
    gallery: true,
    inCart: false,
    shipping: false,
    galleryView: "zoom",
    ref: "",
    cart: [],
    isSelected: false,
    selectedClass: "in_cart",
    shippingCost: 2000,
    inventory: [],
    merchants: [],
  },
  methods: {
    zoomGallery(){
      this.galleryView = "zoom"
    },
    back(){
      this.gallery = "thumbnail"
    },
    addToCart(name, merchant, price, qty, image, id){
      var itemClone = {}
      itemClone = {
        "merchant": merchant,
        "name": name,
        "price": price,
        "qty": qty,
        "image": "/media/" + image,
        "id": id,
      }
      this.cart.push(itemClone)
      this.isSelected = true
    },
    removeFromCart(index){
      this.cart.splice(index, 1)
    },
    deleteFromCart(id){
      console.log(id)
      // right now, any caret down button deletes any input
      // I need to use components to prevent that
      if (this.cart.length > 0){
        index = this.cart.findIndex(x => x.id === id)
        this.cart.splice(index, 1)
      }
    },
    viewCart(){
      this.gallery = false
      this.shipping = false
      this.inCart = true
    },
    viewShipping(){
      this.gallery = false
      this.shipping = true
      this.inCart = false
    }
  },
  computed: {
    itemsInCart(){
      return this.cart.length
    },
    subTotal(){
      subTotal = 0
      inCart = this.cart.length
      for (i=0; i<inCart; i++) {
        subTotal += Number(this.cart[i].price)
      }
      return subTotal
    },
    checkoutTotal(){
      return this.subTotal + this.shippingCost
    },
    merchantName(){
      console.log(this.merchants[0])
    },
  },
  beforeMount() {
    axios
      .get("http://127.0.0.1:8000/get_products/").then(response => {
        (this.inventory = response.data)
        return axios.get("http://127.0.0.1:8000/get_merchants/")
      })
      .then(response => {
        (this.merchants = response.data)
      })
  },
});

Редактировать: Ответ от console.log (this.merchants):

[__ob__: Observer]
length: 0
__ob__: Observer
value: Array(0)
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array
dep: Dep
id: 16
subs: Array(0)
length: 0
__proto__: Array(0)
__proto__: Object
vmCount: 0
__proto__:
walk: ƒ walk(obj)
observeArray: ƒ observeArray(items)
constructor: ƒ Observer(value)
__proto__: Object
__proto__: Array

Answer 1

Почему вы пытаетесь console.log this.merchants в вычисляемом свойстве. Проверьте вычисленное свойство vuejs здесь .

Ваши данные пусты до того, как поступят данные из вызова API. Вот почему ваш this.merchants пуст.

Вы можете получить значение this.merchants, используя метод, и запустить его после вызова API или просмотра, например:

watch: {
  merchants: function () {
    console.log(this.merchants)
  }
}

Он будет поддерживать массив this.merchants каждый раз, когда в нем происходит изменение.