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

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

• javascript
• vue.js
• vuejs2

• Does it have to be a Vue method? It would be really simple to achieve this in vanilla JS – 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 Commented Apr 13, 2018 at 4:19

2 Answers 2

In vanilla JS, it's easy to acplish this by writing DRY code. Define all properties upfront, define the properties to explicitly test for each category, and when it es 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;
}, []);

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