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>

问题是selectedProductDetails.id，其中selectedProductDetails为空。
如果selectedProductDetails为null，则不渲染该组件，我在'AppContentSwitcher'中设置了状态高出两行，这不应该渲染该组件。

这是怎么了？如何解决？

Answer 1

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

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

它有效：）

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

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

1 个答案: