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

The issue of sluggishness in Material-UI when expanding the menu is causing delays

Tips for navigating the world of hybrid web applications that combine elements of both traditional multi-page applications and single-page

What is the best way to distinguish between various objects that are all in a single line?

A guide to reordering table rows by drag-and-drop with JavaScript

Puppeteer has a limit of running only three instances on Heroku

Utilizing Vuex store to showcase data in component according to route

Unable to locate "Gruntfile.js" Node module for task execution

The requested path /releases/add cannot be located

Maintaining the integrity of a list within a for loop

Troubleshooting issues with gh-pages in Nuxt.js

How can we best store the component's state in the URL in AngularJS?

modify the URL records within the GetJson function

What is the process for incorporating a hyperlink into an object's property value?

Troubleshooting: jQuery animation for background-color doesn't function in Internet Explorer

Exploring Amcharts using detailed JSON data

Attempting to display my ejs template from a node server following the activation of a delete button, all without utilizing ajax

Activate on click using JavaScript

Create 3000 unique squares using a procedural generation method

Checking the boxes in javascript

Take action once the Promise outside of the then block has been successfully completed