Question

我打算实现的是在通过Axios上的API加载的选项列表中的选择更改时显示不同的图像

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>

我不断得到

错误“ [Vue警告]：渲染错误：“ 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（）函数，然后作为回报，它将尝试查找ID为0（我认为未定义）的精选小猫。

解决方案是：

设置默认的“ selectedKitchen”值。

或..

结构化代码，以便您的函数在实际选择了小猫之前不会运行。可以完成，但是将您的计算函数更改为方法。然后运行它Onclick https://vuejs.org/v2/guide/events.html

特别说明：我一直以为是凯蒂一直在读代码而不是厨房，但是我要留在这里

无法似乎加载vuejs组件，TypeError：“ this.kitChens.find（...）未定义”

2 个答案: