Guide to organizing a calculated attribute in vue.js

Question

Guide to organizing a calculated attribute in vue.js

I'm struggling with organizing the already computed array of results.

Within Vue, I have successfully filtered images based on their ratio. Now, my goal is to sort these filtered results by date, name, or any other possible category.

Although I attempted to apply a sorting method to the array, I found that this solution doesn't update automatically and reflect the changes in real-time.

  data() {
    return {
      results: [],
      imgProperties: {
        imgId: [],
        imgRatio: [],
        imgCreateDate: []
      }
    };
  },
  computed: {
    resultsFiltered() {
      if (this.sliderVal == 0) {
        return this.results;
      } else {
        const obj = [];
        const arr = [];
        for (let i = 0; i < this.ratioIndeces.length; i++) {
          const element = this.ratioIndeces[i];
          obj.push(this.results[element]);
          arr.push(this.imgProperties.imgRatio[element]);
        }
        return obj;
      }
    }
  },

This current setup lacks any visible sorting solution.

I'm eager to learn where and how to implement sorting functionality.

The provided code snippet illustrates a portion of the existing structure, noting that ratios are calculated within the methods.

My objective is to arrange the array by imgCreateDate and imgRatio.

javascript vue.js sorting vuejs2 computed-properties

Answer 1

Answer №1

Sorting Example using imgRatio:

<p v-for="result in resultsFiltered | orderBy 'imgRatio'">{{ result.imgRatio }}</p>

or

<p v-for="result in resultsFiltered">{{ result.imgRatio }}</p>

computed: {
    resultsFiltered() {
      if (this.sliderVal == 0) {
        return this.results.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      } else {
        const obj = [];
        const arr = [];
        for (let i = 0; i < this.ratioIndeces.length; i++) {
          const element = this.ratioIndeces[i];
          obj.push(this.results[element]);
          arr.push(this.imgProperties.imgRatio[element]);
        }

        return this.obj.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      }
    }
  },

If you are using Vue3, refer to the migration guide here

Answer 2

Sorting Example using imgRatio:

<p v-for="result in resultsFiltered | orderBy 'imgRatio'">{{ result.imgRatio }}</p>

or

<p v-for="result in resultsFiltered">{{ result.imgRatio }}</p>

computed: {
    resultsFiltered() {
      if (this.sliderVal == 0) {
        return this.results.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      } else {
        const obj = [];
        const arr = [];
        for (let i = 0; i < this.ratioIndeces.length; i++) {
          const element = this.ratioIndeces[i];
          obj.push(this.results[element]);
          arr.push(this.imgProperties.imgRatio[element]);
        }

        return this.obj.sort((a, b) => { return b.imgRatio - a.imgRatio;});
      }
    }
  },

If you are using Vue3, refer to the migration guide here

Answer 3

Answer №2

If you need your computed property to utilize a data property for sorting purposes, you can achieve this with the following approach. Initially, I set up my data to contain both the original unsorted data and the current sort parameter:

  data: {
    origItems:[
      {name:'ray', age:10},
      {name:'apple', age:20},
      {name:'zula', age:9},
    ],
    sortType:''
  },

Next, I created my computed property to return values based on the sortType specified:

  computed:{
    items() {
      if(this.sortType === '') return this.origItems;
      if(this.sortType === 'name') {
        return this.origItems.sort((a,b) => {
          if(a.name < b.name) return -1;
          if(a.name > b.name) return 1;
          return 0;
        });
      }
      if(this.sortType === 'age') {
        return this.origItems.sort((a,b) => {
          if(a.age < b.age) return -1;
          if(a.age > b.age) return 1;
          return 0;
        });
      }
    }

This code could potentially be optimized further in terms of efficiency. For testing purposes, I structured it within the following layout:

<div id="app" v-cloak>
  <button @click="sort('name')">Sort by Name</button>
  <button @click="sort('age')">Sort by Age</button>
  <ul>
    <li v-for="item in items">{{ item.name}} - {{ item.age }}</li>
  </ul>
</div>

You can view a live demonstration of this implementation here: https://codepen.io/cfjedimaster/pen/eYYMVWr?editors=1011

Answer 4

If you need your computed property to utilize a data property for sorting purposes, you can achieve this with the following approach. Initially, I set up my data to contain both the original unsorted data and the current sort parameter:

  data: {
    origItems:[
      {name:'ray', age:10},
      {name:'apple', age:20},
      {name:'zula', age:9},
    ],
    sortType:''
  },

Next, I created my computed property to return values based on the sortType specified:

  computed:{
    items() {
      if(this.sortType === '') return this.origItems;
      if(this.sortType === 'name') {
        return this.origItems.sort((a,b) => {
          if(a.name < b.name) return -1;
          if(a.name > b.name) return 1;
          return 0;
        });
      }
      if(this.sortType === 'age') {
        return this.origItems.sort((a,b) => {
          if(a.age < b.age) return -1;
          if(a.age > b.age) return 1;
          return 0;
        });
      }
    }

This code could potentially be optimized further in terms of efficiency. For testing purposes, I structured it within the following layout:

<div id="app" v-cloak>
  <button @click="sort('name')">Sort by Name</button>
  <button @click="sort('age')">Sort by Age</button>
  <ul>
    <li v-for="item in items">{{ item.name}} - {{ item.age }}</li>
  </ul>
</div>

You can view a live demonstration of this implementation here: https://codepen.io/cfjedimaster/pen/eYYMVWr?editors=1011

Answer 5

Answer №3

Presented here is my most recent method for filtering and sorting results simultaneously based on specified parameters:

computed: {
  resultsFiltered () {
    return this.built.dataset.filter(img => {
      return this.customFilters.every(key => {
        const parameter = this.params[key]
        const args = parameter.map(val => this.customInputs[val]).slice(1)
        return filterMenus[key](img[parameter[0]], ...args)
      })
    }).sort(this.sortings[this.sortDirection][this.sortType])
  }
},

A breakdown of the individual components:

built.datatset - an array consisting of objects, where each img represents an object.

customFilters - an array containing different filter options such as 'ratio' or 'keyword', providing flexibility in filtering based on the available keys.

customInputs - captures user input data, whether it's a date range, ratio, keyword, year, etc.

sortings - involves comparing one image to another (img1 compared to img2).

sortDirection - determines the sorting direction as either ascending or descending, like 'img2.ratio - img1.ratio'.

sortType - specifies the sorting type as alphabetical, numerical, by date, or resetting to default view.

Answer 6

Presented here is my most recent method for filtering and sorting results simultaneously based on specified parameters:

computed: {
  resultsFiltered () {
    return this.built.dataset.filter(img => {
      return this.customFilters.every(key => {
        const parameter = this.params[key]
        const args = parameter.map(val => this.customInputs[val]).slice(1)
        return filterMenus[key](img[parameter[0]], ...args)
      })
    }).sort(this.sortings[this.sortDirection][this.sortType])
  }
},

A breakdown of the individual components:

built.datatset - an array consisting of objects, where each img represents an object.

customFilters - an array containing different filter options such as 'ratio' or 'keyword', providing flexibility in filtering based on the available keys.

customInputs - captures user input data, whether it's a date range, ratio, keyword, year, etc.

sortings - involves comparing one image to another (img1 compared to img2).

sortDirection - determines the sorting direction as either ascending or descending, like 'img2.ratio - img1.ratio'.

sortType - specifies the sorting type as alphabetical, numerical, by date, or resetting to default view.

Guide to organizing a calculated attribute in vue.js

Answer №1

Answer №2

Answer №3

Similar questions

Double array summation function

Retrieve the callback arguments using sinon.spy within a JavaScript promise

Struggling with eliminating the # from a URL in AngularJS

How is it possible that the whitelist in NestJs does not generate errors when using an incorrect

Exploring Vue.JS with Staggered Transitions and Enhancing User Experience with Loading More

Electron does not prioritize the @css prefers-color-scheme option

Receiving HTTP POST data using Classic ASP script

Is it possible to utilize Sequelize model methods to articulate the given SQL query effectively?

Using setInterval with Internet Explorer 10

Dynamically select checkbox groups based on items already listed in a textarea

Chrome can't locate VueJS locally

Incorporating dynamic content changes for enhanced user experience can be achieved more effectively with AngularJS

A solution for Array.includes to handle NaN values

The Vue composition api fails to update the text field's bound value

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Using Jcrop and Pixastic for Image Cropping

Looking to showcase the array list on the user interface

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

Issue encountered: Failure to locate module 'socket.io' while attempting to execute a basic server JavaScript file

The progress event of the XMLHttpRequest updates quickly, outpacing the speed of the upload itself