CODEWITHSUNDEEP
javascripthtmlvue.js
hendy0817
hendy0817

Reputation: 1079

Vue.js image src binding / switch statement

new to Vue.js, wondering if this code I have written is valid and would function as expected. I am working on a project that has numerous "brands" so based on the brand name that is coming from vue.store the image related to that brand would show. This works when binding class to an element but I have not yet tried with :src binding images based on switch case. Is there a better way to achieve this?

HTML:

  <img :src="brandImg" class="brandImgOne" alt=brand "image" />

js:

computed: {
   brandImg() {
      let brandImg = '';
      let thisBrand = this.$store.state.ui.theme.brand;
      switch (thisBrand) {
          case 'brandOne':
          brandIcon = '/img/iconOne.png';
          break;
          case 'brandTwo':
          brandIcon = '/img/iconTwo.png';
          break;
          case 'brandThree':
          brandIcon = '/img/iconThree.png';
          break;
          default:
          console.warn('not configured`);
          break;
      }
         return brandIcon;
     }
   }

Upvotes: 1

Views: 2475

Answers (1)

Matheus Frez
Matheus Frez

Reputation: 324

You have to return the values on the switch like this: 

computed: {
   brandImg() {
      let brandImg = '';
      let thisBrand = this.$store.state.ui.theme.brand;
      switch (thisBrand) {
          case 'brandOne':
          return '/img/iconOne.png';
          case 'brandTwo':
          return '/img/iconTwo.png';
          case 'brandThree':
          return '/img/iconThree.png';
          default:
          console.warn('not configured`);
          break;
      }
     }
   }

Upvotes: 4

Related Questions