Sorting multiple items with a watched value in Vue can be achieved by utilizing specific techniques and

Question

Sorting multiple items with a watched value in Vue can be achieved by utilizing specific techniques and

I have set up a select element in my HTML code and I am looking to give users the option to sort a table based on the selected option values.

The information I need to organize (which consists of many objects) is shown below:

https://i.sstatic.net/d0p4Q.png

I am monitoring a select element that has a v-model value called "sort":

  watch: {
  search: function (val) {
    if (val.length === 0) return this.filtered = this.affiliates;

    this.filtered = this.affiliates.filter(function (cont) {
      return cont.shop_name.toLowerCase().indexOf(val.toLowerCase()) >= 0 || cont.app_name.toLowerCase().indexOf(val.toLowerCase()) >= 0;
    });
  },
  sort: function (val) {
    console.log(this.filtered);
  },

How can I arrange the objects based on the selected sorting value?

The data is stored in the variable this.filtered

I aim to sort by the following values:

 <select v-model="sort">
          <option value="date_installed">Latest</option>
          <option value="status">Status</option>
          <option value="share">Share</option>
        </select>

javascript vue.js vuejs2 watch

Answer 1

Answer №1

Although utilizing a watch can make it functional, it appears that using computed would be a more suitable approach.

The sort function requires a compare function to dynamically compare objects based on sorting preferences, which can be achieved by passing it as a key using bracket notation for accessor.

<template>
    <div>
        <select v-model="sortBy">
            <option value="date_installed">Latest</option>
            <option value="status">Status</option>
            <option value="share">Share</option>
        </select>
        <ul>
            <li v-for="item in filtered" :key="item.id">{{ item.app_name}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sortBy: [],
            affiliates: [
                //...
            ]
        }
    },
    computed: {
        filtered() {
            if (val.length === 0) return this.affiliates;
            return this.affiliates.sort( (a,b) => {
                return a[this.sortBy] - b[this.sortBy]
            });
        }
    },
}
</script>

Answer 2

Although utilizing a watch can make it functional, it appears that using computed would be a more suitable approach.

The sort function requires a compare function to dynamically compare objects based on sorting preferences, which can be achieved by passing it as a key using bracket notation for accessor.

<template>
    <div>
        <select v-model="sortBy">
            <option value="date_installed">Latest</option>
            <option value="status">Status</option>
            <option value="share">Share</option>
        </select>
        <ul>
            <li v-for="item in filtered" :key="item.id">{{ item.app_name}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sortBy: [],
            affiliates: [
                //...
            ]
        }
    },
    computed: {
        filtered() {
            if (val.length === 0) return this.affiliates;
            return this.affiliates.sort( (a,b) => {
                return a[this.sortBy] - b[this.sortBy]
            });
        }
    },
}
</script>

Sorting multiple items with a watched value in Vue can be achieved by utilizing specific techniques and

Answer №1

Similar questions

A guide on incorporating a JavaScript plugin using Vue.use() into a TypeScript project equipped with typings

Employing lodash for object comparison and removal from an array

Bootstrap's square-shaped columns

Exploring the data types of dictionary elements in TypeScript

Preventing jQuery plugin from overriding default settings

Using onDoubleClick with MUI TextField: A Quick Guide

Encountering a 500 (Internal Server Error) while trying to insert data into the database through ajax

The spring submission function requires the use of two parameters

What steps should I take to resolve the 'Uncaught Error: Cannot find module 'path'' issue in my React.js application?

Using pg-promise to insert a UUID into the database

React: Modifying values of individual input fields

Ensuring data is saved on multiple forms using ui-router in AngularJS

Reasons why the success function is not functioning properly

Creating a PDF document from HTML content using html2pdf in a Vue 3.js application: A step-by-step guide

What is the appropriate placement for setting Firebase auth state persistence in a Vue.js application?

Guide to effectively retrieving data from S3 and displaying a view at regular intervals of 4 seconds

I'm having trouble getting my JQuery function to activate

What is the best way to link one element to another element?

"Experiencing difficulties deploying Firebase functions - Encountering an error message stating 'Cannot read property 'firebase-admin' of

Component in Next Js fails to pass props when using getInitialProps