Is there a "Vue way" to check for empty string variables other than if/else statements?

Question

Im learning how to use Vue and having trouble wrapping my head around the "vue" way to do things.

Is there a Vue function or method i can use to not have to write so many statements?

    this.catArr = []

    if (cat === 'All Modules') {
      if (this.assetType !== '') {
        this.catArr.push(this.assetType)
      }
      if (this.assetFormat !== '') {
        this.catArr.push(this.assetFormat)
      }
      if (this.assetUse !== '') {
        this.catArr.push(this.assetUse)
      }
      this.catArr.push(this.assetMod)
    } else if (cat === 'All Types') {
      if (this.assetMod !== '') {
        this.catArr.push(this.assetMod)
      }
      if (this.assetFormat !== '') {
        this.catArr.push(this.assetFormat)
      }
      if (this.assetUse !== '') {
        this.catArr.push(this.assetUse)
      }
      this.catArr.push(this.assetType)
    } else {
      if (this.assetMod !== '') {
        this.catArr.push(this.assetMod)
      }
      if (this.assetType !== '') {
        this.catArr.push(this.assetType)
      }
      if (this.assetFormat !== '') {
        this.catArr.push(this.assetFormat)
      }
      if (this.assetUse !== '') {
        this.catArr.push(this.assetUse)
      }
    }

Does it have to be a Vue method? It would be really simple to achieve this in vanilla JS — CertainPerformance
– CertainPerformance, Commented Apr 13, 2018 at 4:17
it does not have to be Vue - but since im learning vue it would be nice to know if there was a built in way. — user3869231
– user3869231, Commented Apr 13, 2018 at 4:19

CertainPerformance · Accepted Answer · 2018-04-13 04:39:43Z

2

In vanilla JS, it's easy to accomplish this by writing DRY code. Define all properties upfront, define the properties to explicitly test for each category, and when it comes time to create the array, just iterate over the property names and test them accordingly:

const props = ['assetType', 'assetFormat', 'assetUse', 'assetMod'];
const catPropsNotToTest = {
  'All Modules': ['assetMod'],
  'All Types': ['assetType'],
  default: [],
};

// ...

const propsNotToTest = catPropsNotToTest[cat] ? catPropsNotToTest[cat] : catPropsNotToTest.default;
this.catArr = props.reduce((propArr, propName) => {
  if (propsNotToTest.includes(propName)) propArr.push(this[propName]);
  else if (this[propName] !== '') propArr.push(this[propName]);
  return propArr;
}, []);

answered Apr 13, 2018 at 4:39

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3869231 Over a year ago

Thanks a lot CP, maybe i was too deep in Vue to think in vanilla JS

user3869231 · Accepted Answer · 2018-04-25 21:53:15Z

0

I was not able to find a "Vue" way in my research but i was able to simplify the logic.

   this.catArr = []

    if (this.assetType !== '') {
      this.catArr.push(this.assetType)
    }
    if (this.assetFormat !== '') {
      this.catArr.push(this.assetFormat)
    }
    if (this.assetUse !== '') {
      this.catArr.push(this.assetUse)
    }
    if (this.assetMod !== '') {
      this.catArr.push(this.assetMod)
    }

answered Apr 25, 2018 at 21:53

user3869231

3421 gold badge5 silver badges20 bronze badges

Collectives™ on Stack Overflow

Is there a "Vue way" to check for empty string variables other than if/else statements?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related