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

Solution 1

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

Solution 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;
}, []);

Comments

[CertainPerformance]

Does it have to be a Vue method? It would be really simple to achieve this in vanilla JS

[user3869231]

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]

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