Guide on implementing short-circuit evaluation in Vue method?

Question

Guide on implementing short-circuit evaluation in Vue method?

Recently, I have been working with vue-cli and vuex to implement a specific functionality. Here is the code snippet that showcases my current progress:

methods: {
filtered() { 
  let vol = this.$store.state.data[1].data.filter(i => i.type === 'vol')[0].measure || 0;
  let weight = this.$store.state.data[1].data.filter(i => i.type === 'weight')[0].measure || 0;
 }
}

In my data, there exists a 'vol' type but no 'weight' type, hence I want the variable weight to be set as 0.

However, I encountered an error stating

Cannot read property 'measure' of undefined

.

If anyone has any suggestions or solutions to this issue, please feel free to share. Thank you in advance!

javascript vue.js methods vuex short-circuit-evaluation

Answer 1

Answer №1

If you find yourself using filter(), consider switching to find() and saving the result in a variable. Then, verify if the variable has any content.

methods: {
    filtered() {
      let volobj = this.$store.state.data[1].data.find(i => i.type === 'vol')
      let vol = volobj ? volobj.measure : 0;
      let weightobj = this.$store.state.data[1].data.find(i => i.type === 'weight')
      let weight = weightobj ? weightobj.measure : 0;
    }
}

Answer 2

If you find yourself using filter(), consider switching to find() and saving the result in a variable. Then, verify if the variable has any content.

methods: {
    filtered() {
      let volobj = this.$store.state.data[1].data.find(i => i.type === 'vol')
      let vol = volobj ? volobj.measure : 0;
      let weightobj = this.$store.state.data[1].data.find(i => i.type === 'weight')
      let weight = weightobj ? weightobj.measure : 0;
    }
}

Answer 3

Answer №2

Solution :

filter() method in arrays will return an Array, while the find() method will retrieve the first element of the result.
To set a default value, use : { measure: 0 }. If nothing is found, this default value will be used as a fallback.

methods: {
    filtered() {
      let volume = (this.$store.state.data[1].data.find(item => item.type === 'volume') || { measure: 0 }).measure
      let weight = (this.$store.state.data[1].data.find(item => item.type === 'weight') || { measure: 0 }).measure
    }
}

Answer 4

Solution :

filter() method in arrays will return an Array, while the find() method will retrieve the first element of the result.
To set a default value, use : { measure: 0 }. If nothing is found, this default value will be used as a fallback.

methods: {
    filtered() {
      let volume = (this.$store.state.data[1].data.find(item => item.type === 'volume') || { measure: 0 }).measure
      let weight = (this.$store.state.data[1].data.find(item => item.type === 'weight') || { measure: 0 }).measure
    }
}

Guide on implementing short-circuit evaluation in Vue method?

Answer №1

Answer №2

Solution :

Similar questions

Add a text description to the textarea when you upload an image

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

How to combine two fetch calls in Nuxt3?

Experiencing peculiar behavior with the delete keyword in JavaScript

Error: karma cannot locate the templateUrl for Angular component

It appears that when filtering data in Angular from Web Api calls, there is a significant amount of data cleaning required

Retrieving the value from a concealed checkbox

Choose the offspring of an element using jQuery

Arrays in Vue Data

Error encountered in jQuery validation: Uncaught TypeError - $(...) ""valid is not a function" is displayed with proper references and order

Echo input and refresh on the current page upon submission

Can someone please advise me on how to output the value of a var_dump for an array using console.log?

Customize a jQuery tab plugin to show a particular tab upon initialization [with JSFiddle example]

The jQuery AJAX function executing twice upon click

Assign the mapState function to dynamically retrieve state objects from the Vuex store within the component

angular-bootstrap-mdindex.ts is not included in the compilation result

What are the steps to store and access state variables using session storage in a React application?

Tips for extracting popular song titles from music platforms such as Hungama or Saavn

Restrictions on the number of characters based on the size of fonts in an html list sc

Error encountered while executing the yarn install command: ENOTFOUND on registry.yarnpkg.com