如何通过 v-for 指令在组件内部使用三元运算符？

Question

工作代码如下所示：

<template lang="pug">
b-carousel.d-none.d-sm-block(
  id='categoryRoulette'
  controls
  no-animation
  :interval='0'
)
  b-carousel-slide(
    v-for="category in chunkedArr"
    :key="category.permalink"
  )
    template(v-slot:img)
      b-card-group(deck)
        b-card(
          v-for="(item, index) in category" :key="index"
          :img-src='item.image'
          img-alt='Image'
          img-top
          tag='article'
          style="min-width: 250px;"
        )
          b-card-text.d-flex.justify-content-center.align-items-center
            h5
              a(href="#") {{ item.title }}
</template>

但是，我需要检查 item.image 是否存在，如果不存在则显示空白图像，如下所示：

<template lang="pug">
b-carousel.d-none.d-sm-block(
  id='categoryRoulette'
  controls
  no-animation
  :interval='0'
)
  b-carousel-slide(
    v-for="category in chunkedArr"
    :key="category.permalink"
  )
    template(v-slot:img)
      b-card-group(deck)
        b-card(
          v-for="(item, index) in category" :key="index"
          :img-src='item.image ? item.image : '../assets/images/blank.png''
          img-alt='Image'
          img-top
          tag='article'
          style="min-width: 250px;"
        )
          b-card-text.d-flex.justify-content-center.align-items-center
            h5
              a(href="#") {{ item.title }}
</template>

但是，这条线不起作用：

:img-src='item.image ? item.image : '../assets/images/blank.png''

如何查看item.image？也许，还有另一种方法？

Answer 1

您不能使用嵌套在另一个 ' 中的 '，因此将其更改为 "

:img-src='item.image ? item.image : "../assets/images/blank.png"'

或

:img-src="item.image ? item.image : '../assets/images/blank.png'"

如何通过 v-for 指令在组件内部使用三元运算符？

How to use ternary operator inside component with v-for directive?

javascript

conditional-operator

vue.js