Блог

У меня странная проблема с рендерингом моих компонентов.

   <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.идентификатор, в котором selectedProductDetails равен нулю.
2. Я не отображаю этот компонент, если selectedProductDetails имеет значение null, двумя строками выше я устанавливаю состояние в «AppContentSwitcher», которое не должно отображать этот компонент.

Что здесь не так? Как это исправить?

Я нахожу обходной путь. Я создал метод:

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

и это работает 🙂

Тем не менее, я не понимаю, почему мое первое решение не работает.