Не могу загрузить компонент vuejs, TypeError: «this.kitChens.find (...) не определено»

Question

Чего я хочу добиться, так это отобразить другое изображение при выбранном изменении из списка параметров, загруженных через API на Axios

Код компонента Vue

<template>
  <div class="row my-3 p-75">
    <div class="col-xl-6 col-md-6 col-sm-12 container-fluid rounded-pill ">
      <div class="content-body rounded-pill">
        <section id="description" class="card rounded-pill">
          <div class="card-content rounded-pill ">
            <img class="-block w-100" :src="'/../../images/'+ kitchenImage()"
              :alt="'{{ kitChen.kitchen_type}}'" />
          </div>
        </section>
      </div>
    </div>

    <div class="col-xl-6 col-md-6 col-sm-12 zindex-1 ">
      <h4 class="card-title"> Choose your Kitchen configuration</h4>
      <select class="form-control-lg rounded-pill primary" id="basicSelect" v-model="selectedKitchen"
        @change="getKitchen()">
        <option value="0">Choose your Kitchen configuration</option>
        <option v-for="kitChen in kitChens" :value="kitChen.id" v-bind:key="kitChen.id">
          {{ kitChen.kitchen_type }}</option>
      </select>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log('Component mounted.')
      this.getKitchen('1');
    },
    directives: {
      init: {
        bind(el) {
          el.value = el.getAttribute("value");
          el.dispatchEvent(new Event("input"));
        }
      }
    },
    computed: {
      kitchenImage() {
        return (
          this.kitChens.find(el => el.id == this.selectedKitchen).kitchen_type_pic || "");
      }
    },
    data() {
      return {
        kitChens: [],
        selectedKitchen: 0, // set default section to 'home'

      };
    },
    props: {
      estateid: String,
      houseid: String,
    },
    methods: {
      getKitchen: function () {
        axios.get("/api/getKitchen", {
            params: {
              estate_id: this.estateid,
              house_type_id: this.houseid,
            }
          })
          .then(
            function (response) {
              this.kitChens = response.data;
            }.bind(this)
          );
      },
      created: function () {
        this.getKitchen();
      }
    }
  };
</script>

Я продолжаюполучение

error "[Vue warn]: Ошибка при рендеринге:" TypeError: this.kitChens.find (...) не определено "", что приводит к тому, что компонент не рендерит.

Вот так я загружаю компонент

<kitchen-component estateid="2" houseid="3"></kitchen-component>

Буду благодарен за любую помощь

Answer 1

Здесь много проблем ...

Во-первых, kitChen с большой буквы C в середине? Я не знаю, почему вы это сделали, но любые будущие разработчики вашего кода будут благодарны вам за то, что вы придерживаетесь правильного написания и стандартного использования заглавных букв.

Аналогично вам нужно разобраться с отступом. Это повсюду. Хотя это может не помешать работе кода, оно не позволяет другим разработчикам понять его.

Следующая проблема - это ваше свойство kitchenImage. Первоначально массив kitChens будет пустым, поэтому он ничего не найдет. find вернет undefined, а затем попытка доступа к свойству kitchen_type_pic не удастся. Вам нужно что-то вроде этого:

computed: {
  kitchenImage() {
    const kitchen = this.kitChens.find(el => el.id == this.selectedKitchen)

    return kitchen && kitchen.kitchen_type_pic
  }
}

Здесь я предположил, что для kitchenImage допустимо быть undefined.

Тогда в вашем шаблоне есть несколько проблем:

<img class="-block w-100" :src="'/../../images/' + kitchenImage()" :alt="'{{ kitChen.kitchen_type}}'" />

kitchenImage - это вычисляемое свойство, а не метод, поэтому вам не нужно () в конце. Также потребуется v-if для обработки случая, когда kitchenImage равно undefined. Возможно, для этого v-if имеет больше смысла быть выше, мне трудно понять, каким должно быть правильное поведение в этом случае.

Существует также проблема alt. Я даже не уверен, что он пытается сделать.

Я думаю, что вы стремитесь к чему-то вроде этого:

<img
  v-if="kitchenImage"
  class="-block w-100"
  :src="'/../../images/' + kitchenImage"
  :alt="kitChen.kitchen_type"
/>

Однако, чтобы это работало, ему понадобится kitChen.kitchen_typeсуществовать, и я не вижу ничего в вашем исходном коде, чтобы предположить, что это так. Я подозреваю, что вам нужно вычисленное свойство, подобное kitchenImage, которое возвращает kitchen_type вместо kitchen_type_pic.

Answer 2

Вы вызываете kitchenImage () при загрузке шаблона.

Который запускает вашу функцию Find (), которая затем в ответ попытается найти котенка с идентификатором 0, который, я полагаю, не определен.

Решение:

Установите значение selectedKitchen по умолчанию.

Или ..

структурируйте свой код так, чтобы ваша функция не выполнялась до тех пор, пока не будет запущен котенокна самом деле был выбран. Это можно сделать, но изменив вычисляемую функцию на метод. Затем запустите его Onclick https://vuejs.org/v2/guide/events.html

Специальное примечание: я думал, что все это время Кити читала код, а не кухню, но я собираюсь оставить это в