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

Question

The working code looks as following:

<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>

But, I need to check if item.image exists and if not to display blank image as following:

<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>

But, this line is not working:

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

How to check item.image? Maybe, there is another way?

question from:https://stackoverflow.com/questions/65866040/how-to-use-ternary-operator-inside-component-with-v-for-directive

Answer 1

You can't use ' nested in another ', so change it to "

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

or

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