applying v-bind directive when the variable is null

Question

applying v-bind directive when the variable is null

I am using Vue and have a variable. If the variable has a value, I want to display an image (pic1). However, if the variable is empty, then I want to show another image (pic2).

Here's my code...

<template v-for="(item, index) in items">
<img v-if="item.var" v-bind:src="'/images/pic1'">
<img v-else v-bind:src="'/images/pic2'">

<img v-if="item.var.length > 0" v-bind:src="'/images/pic1.jpg'">
<img v-if="item.var.length == 0" v-bind:src="'/images/pic2.jpg'">
</template>

I have tried implementing two independent options:

I used v-else, but it didn't work as expected. It only displayed posts with item.var, while discarding those with empty item.var.
I also attempted using .length, but it didn't work at all.

Any suggestions on how to make this functionality work correctly?

javascript vue.js vuejs2

Answer 1

Answer №1

Do you know what item.var is? Could it be possible that your file path is incorrect? Also, check if you really need both single and double quotation marks for the path - try removing one pair. Keep in mind that images have specific file types like .jpg. If fixing these issues does not work, consider binding the image source with "require", here's an example:

<img :src="require('./images/pic.png')" />

Answer 2

Do you know what item.var is? Could it be possible that your file path is incorrect? Also, check if you really need both single and double quotation marks for the path - try removing one pair. Keep in mind that images have specific file types like .jpg. If fixing these issues does not work, consider binding the image source with "require", here's an example:

<img :src="require('./images/pic.png')" />

Answer 3

Answer №2

Are you confident that the data for the v-for loop was properly passed?

Double check your iteration variable on item.var,

The correct format for v-for is 
v-for="(item, index) in items"

I just verified with:

  data() {
return {
  item :  {
      var: [
        1,2,3
      ]
    }
  }
}

and I see mona ;)

 <img v-if="item.var" v-bind:src="'https://tineye.com/images/widgets/mona.jpg'">

Answer 4

Are you confident that the data for the v-for loop was properly passed?

Double check your iteration variable on item.var,

The correct format for v-for is 
v-for="(item, index) in items"

I just verified with:

  data() {
return {
  item :  {
      var: [
        1,2,3
      ]
    }
  }
}

and I see mona ;)

 <img v-if="item.var" v-bind:src="'https://tineye.com/images/widgets/mona.jpg'">

applying v-bind directive when the variable is null

Answer №1

Answer №2

Similar questions

Step-by-step guide for implementing a scroll event on FancyBox

Utilizing BackboneJs to Access and Fetch Data from an asmx Webservice

Issue with overlay functionality after updating to jQuery version 1.12.1

Looking to find top-notch keywords that stand out from the rest?

Filtering a collection using another collection in Backbone: tips and tricks

Once the stripe token is generated, proceed to submit the form

Determine the width of two inline input fields

Placing information within a nested array with multiple levels of nesting

What's the best way to align several buttons in the center of the screen horizontally?

Storing socket.io data in an array

Uploading a Node.js Package to GitHub Packages - Issue ENEEDAUTH

Replacing a function in TypeScript

Exploring the functions of `map` and `filter` in the world of

Verify if the array entries match

Is there a way to alter a class using ng-class only when the form is deemed valid?

Dependency of multiple objects in Webgl three.js

eliminate the gap in the MUI Accordion when it is expanded

Encountering a CORS issue while trying to make requests to the Facebook Graph

React: Issue with For Loop not recognizing updates in Hook's State

When the drawer is opened, there is a strange phenomenon of all buttons being mysteriously clicked