Sort titles in Array of objects with VueJS

Question

I am trying to sort my array of objects. I have managed to use the console to return all the titles but struggling now to perform the actual sort. I am using a select menu to switch between relevancy (default) and to sort alphabetically.

Any help is greatly appreciated

 <select v-model="sortatoz" v-on:change="sortItems($event)">
              <option disabled value="">Select</option>
              <option value="alphabetically">Alphabetically</option>
              <option value="relevance">Relevance</option>
            </select>




 methods: {
        sortItems: function sortItems(event) {
          this.sortby = event.target.value;
          if (this.sortatoz === "alphabetically") {
            Array.from(
              document.querySelectorAll("div > h3.title")
            ).map((x) => x.innerText);
           ??What should I add here to sort???
          } else {
            Array.from(
              document.querySelectorAll("div > h3.title")
            ).map((x) => x.innerText);
            ???
          }
        },

Are your h3.title elements the result of a v-for loop? if so just manipulate the arary. — Ohgodwhy
– Ohgodwhy, Commented Nov 3, 2021 at 19:50
@user13928344 You can checkout github.com/Jebasuthan/vue_crud_bootstrap for more vue features implemented in the application with demo — Jebasuthan
– Jebasuthan, Commented Nov 4, 2021 at 13:16

Jebasuthan · Accepted Answer · 2021-11-04 13:06:39Z

1

Step 1: Create HTML template with select options and table to display data with sorting functionality.

 <div id="app">
  <select v-model="sortatoz" @change="sortItems">
    <option disabled value="">Select</option>
    <option value="alphabetically">Alphabetically</option>
    <option value="relevance">Relevance</option>
  </select>
  <table border="1">
    <thead>
      <tr>
        <th>Title</th>
        <th>Authur</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in sortedItems" :key="index">
        <td>{{ item.title }}</td>
        <td>{{ item.authur }}</td>
      </tr>
    </tbody>
  </table>
</div>

Step 2: Define your model data. I created a sample model data with books title with Authur names

 data() {
  return {
    sortatoz: "",
    listTitles: [
      {
        title: "Cabbages and Kings",
        authur: "O. Henry",
      },
      {
        title: "Alien Corn",
        authur: "Sidney Howard",
      },
      {
        title: "The Little Foxes",
        authur: "Lillian Hellman",
      },
      {
        title: "A Time of Gifts",
        authur: "Patrick Leigh Fermor",
      },
      {
        title: "Ego Dominus Tuus",
        authur: "W. B. Yeats",
      },
      {
        title: "Antic Hay",
        authur: "Aldous Huxley",
      },
    ],
  };
},

Step 3: Define your computed lifecycle. When ever changes happened in the model data automatically computed function will get updated.

computed: {
  sortedItems() {
    return this.listTitles;
  },
},

Step 4: Define @change event for select options

 methods: {
  sortItems() {
    if (this.sortatoz === "alphabetically") {
      return this.listTitles.sort((a, b) => (a.title > b.title ? 1 : -1));
    } else {
      return this.listTitles.sort((a, b) => (a.title > b.title ? -1 : 1));
    }
  },
},

DEMO

answered Nov 4, 2021 at 13:06

Jebasuthan

5,6246 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user13928344 Over a year ago

Thank you so much. Greatly appreciated.

Jebasuthan Over a year ago

@user13928344 Its my pleasure! You can checkout github.com/Jebasuthan/vue_crud_bootstrap Table sorting, filter, search and Pagination are implemented with localStorage, Vuex, Vue routing, REST API call, custom component creation, Validations are all implemented.

user13928344 Over a year ago

I will do that, thank you!

Collectives™ on Stack Overflow

Sort titles in Array of objects with VueJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related