Sort titles in Array of objects with VueJS-CodePudding

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);
            ???
          }
        },

CodePudding user response：

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