[Vue 警告]：渲染错误：“TypeError：_vm.selectedProductDetails 为空”

Question

我在渲染组件时遇到了奇怪的问题。

  <app-content-switcher :state="!!selectedProductDetails">
    <template slot="up">
      <product-d-p :product-id="selectedProductDetails.id">
        <template slot-scope="{data: product, loading, error}">
          <label v-if="loading">Loading</label>
          <div v-else-if="product">
            {{product}}
          </div>
          <label v-else-if="error">Error</label>
        </template>
      </product-d-p>
    </template>
    <template slot="down">
      Nope
    </template>
  </app-content-switcher>

AppContentSwitcher 非常简单。

<template>
  <div>
    <slot
        name="up"
        v-if="state"
    />
    <slot
        name="down"
        v-else
    />
  </div>
</template>

<script>
export default {
  name: "AppContentSwitcher",
  props: {
    state: {
      type: Boolean,
      required: true
    }
  }
}
</script>

1. 问题是 selectedProductDetails.id，其中 selectedProductDetails 为空。
2. 如果 selectedProductDetails 为空，我不渲染此组件，高两行我在“AppContentSwitcher”中设置状态，它不应该渲染此组件。

这里有什么问题？如何解决？

Answer 1

我找到了解决方法。我创建了方法：

getSelectedProductDetailsId: function (){
  return this.selectedProductDetails?.id
}

它工作:)

我仍然不明白为什么我的第一个解决方案不起作用。