What's the best way to sort objects using VueJS?

Question

What's the best way to sort objects using VueJS?

Lately, I've been delving into Vue.js and experimenting with it. Currently, I am working on a basic todo list project. However, I have run into some issues with the buttons that are supposed to filter tasks. The "All" button should display every single task, the "Ongoing" button is meant for unchecking input checkboxes, and the "Done" button is for displaying checked tasks.

I'm struggling to figure out how to fix this problem. Any suggestions or solutions would be greatly appreciated!

new Vue({
  el: '#app',
  data: {
    inputTask:'',
    todos: [
      {task:'task01', done: false},
      {task:'task02', done: false},
      {task:'task03', done: true},
      {task:'task04', done: true},
      {task:'task05', done: false},
    ]
  },
  computed: {


  },
  methods: {
    allTask : function () {
      this.todos
    },
    ongoingTask: function () {
      this.todos = this.todos.filter(function (el) {
        el.value = false
      })
    },
    doneTask: function () {
      this.todos = this.todos.filter(function (el) {
        el.checked
      })
    },
    addTask: function() {
      const todo = { task: this.inputTask, done:false, };
      this.todos.push(todo);
      this.inputTask ='';
    },
    deleteTask: function (index) {
      this.todos.splice(index, 1);
    }


  }

})

.done {text-decoration: line-through;}

<div id="app">
<input type="text" v-model="inputTask">
<button @click="addTask">Add</button>

<div>
<button @click="allTask">All</button>
<button @click="ongoingTask">Ongoing</button>
<button @click="doneTask">Done</button>
</div>

<ul>
  <li v-for="(todo, index) in todos" :key="todo">
    <input type="checkbox" v-model="todo.done">
    <span :class="{done:todo.done}">{{todo.task}}</span>
    <button @click="deleteTask(index)">Remove</button>
  </li>
</ul>
<p v-show="todos.length===0">Nothing to do</p>


</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

javascript vue.js filter

Answer 1

Answer №1

To enhance your task filtering capabilities, consider utilizing computed properties while also improving the user interface for a more user-friendly experience. Your updated code snippet will appear as follows:

new Vue({
    el: '#app',
    data: {
        type: '',
        inputTask:'',
        todos: [
            {task:'task01', done: false},
            {task:'task02', done: false},
            {task:'task03', done: true},
            {task:'task04', done: true},
            {task:'task05', done: false},
        ]
    },
    methods: {
        setFilterType(type) {
            this.type = type;
        },
        addTask() {
            const todo = { task: this.inputTask, done: false};
            this.todos.push(todo);
            this.inputTask = '';
        },
        deleteTask(index) {
            this.todos.splice(index, 1);
        }
    },
    computed: {
        filteredTodos() {
            return this.todos.filter(todo => {
                switch(this.type) {
                    case 'ongoing':
                        return !todo.done;
                    case 'done':
                        return todo.done;
                    default:
                        return true;
                }
            });
        }
    }
})

Here is the corresponding template:

<div id="app">
<input type="text" v-model="inputTask">
<button @click="addTask">Add</button>

<div>
<button :class="{active: type ===''}" @click="setFilterType('')">All</button>
<button :class="{active: type ==='ongoing'}" @click="setFilterType('ongoing')">Ongoing</button>
<button :class="{active: type ==='done'}" @click="setFilterType('done')">Done</button>
</div>

<ul>
  <li v-for="(todo, index) in filteredTodos" :key="todo">
    <input type="checkbox" v-model="todo.done">
    <span :class="{done:todo.done}">{{todo.task}}</span>
    <button @click="deleteTask(index)">Remove</button>
  </li>
</ul>
<p v-show="todos.length===0">Nothing to do</p>


</div>

In addition, I have included the active class for buttons, allowing you to apply CSS styling to highlight the current sorting. For further information on computed properties, refer to this resource.

Answer 2

To enhance your task filtering capabilities, consider utilizing computed properties while also improving the user interface for a more user-friendly experience. Your updated code snippet will appear as follows:

new Vue({
    el: '#app',
    data: {
        type: '',
        inputTask:'',
        todos: [
            {task:'task01', done: false},
            {task:'task02', done: false},
            {task:'task03', done: true},
            {task:'task04', done: true},
            {task:'task05', done: false},
        ]
    },
    methods: {
        setFilterType(type) {
            this.type = type;
        },
        addTask() {
            const todo = { task: this.inputTask, done: false};
            this.todos.push(todo);
            this.inputTask = '';
        },
        deleteTask(index) {
            this.todos.splice(index, 1);
        }
    },
    computed: {
        filteredTodos() {
            return this.todos.filter(todo => {
                switch(this.type) {
                    case 'ongoing':
                        return !todo.done;
                    case 'done':
                        return todo.done;
                    default:
                        return true;
                }
            });
        }
    }
})

Here is the corresponding template:

<div id="app">
<input type="text" v-model="inputTask">
<button @click="addTask">Add</button>

<div>
<button :class="{active: type ===''}" @click="setFilterType('')">All</button>
<button :class="{active: type ==='ongoing'}" @click="setFilterType('ongoing')">Ongoing</button>
<button :class="{active: type ==='done'}" @click="setFilterType('done')">Done</button>
</div>

<ul>
  <li v-for="(todo, index) in filteredTodos" :key="todo">
    <input type="checkbox" v-model="todo.done">
    <span :class="{done:todo.done}">{{todo.task}}</span>
    <button @click="deleteTask(index)">Remove</button>
  </li>
</ul>
<p v-show="todos.length===0">Nothing to do</p>


</div>

In addition, I have included the active class for buttons, allowing you to apply CSS styling to highlight the current sorting. For further information on computed properties, refer to this resource.

Answer 3

Answer №2

It appears that the filter functions for ongoingTask and doneTask are incorrect as they should be returning a value. To understand how the filter function works, you can reference the documentation here.

If I understand correctly, the following adjustments to the code should resolve the issue. Please provide feedback on whether this solves the problem so I can make any necessary updates.

// ...
    ongoingTask: function () {
      this.todos = this.todos.filter(function (el) {
        return el.value === false
      })
    },
    doneTask: function () {
      this.todos = this.todos.filter(function (el) {
        return el.checked
      })
    },
// ...

UPDATE:

An additional aspect of the problem relates to the logic; currently, when clicking on any filtering button, data in the state is removed causing unwanted data loss. It is advisable to retain the data and utilize computed properties to address this issue. Below is a demonstration using a Vue component for consolidated data handling:

<template>
  <div id="app">
    <input type="text" v-model="inputTask">
    <button @click="addTask">Add</button>

    <div>
      <button @click="changeFilter('all')">All</button>
      <button @click="changeFilter('ongoing')">Ongoing</button>
      <button @click="changeFilter('done')">Done</button>
    </div>

    <ul>
      <li v-for="(todo, index) in getTasksList()" :key="{index}">
        <input type="checkbox" v-model="todo.done">
        <span :class="{done:todo.done}">{{todo.task}}</span>
        <button @click="deleteTask(index)">Remove</button>
      </li>
    </ul>
    <p v-show="todos.length===0">Nothing to do</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    inputTask: "",
    currentFilter: "ongoing",
    todos: [
      { task: "task01", done: false },
      { task: "task02", done: false },
      { task: "task03", done: true },
      { task: "task04", done: true },
      { task: "task05", done: false }
    ]
  }),
  computed: {
    ongoingTasks: function() {
      return this.todos.filter(function(todo) {
        return todo.done === false;
      });
    },
    doneTasks: function() {
      return this.todos.filter(function(el) {
        return el.done;
      });
    }
  },
  methods: {
    changeFilter(newFilter) {
      this.currentFilter = newFilter;
    },
    addTask: function() {
      const todo = { task: this.inputTask, done: false };
      this.todos.push(todo);
      this.inputTask = "";
    },
    deleteTask: function(index) {
      this.todos.splice(index, 1);
    },
    getTasksList() {
      switch (this.currentFilter) {
        case "ongoing":
          return this.ongoingTasks;
        case "done":
          return this.doneTasks;
        case "all":
        default:
          return this.todos;
      }
    }
  }
};
</script>

I trust this will be beneficial to your situation!

Answer 4

It appears that the filter functions for ongoingTask and doneTask are incorrect as they should be returning a value. To understand how the filter function works, you can reference the documentation here.

If I understand correctly, the following adjustments to the code should resolve the issue. Please provide feedback on whether this solves the problem so I can make any necessary updates.

// ...
    ongoingTask: function () {
      this.todos = this.todos.filter(function (el) {
        return el.value === false
      })
    },
    doneTask: function () {
      this.todos = this.todos.filter(function (el) {
        return el.checked
      })
    },
// ...

UPDATE:

An additional aspect of the problem relates to the logic; currently, when clicking on any filtering button, data in the state is removed causing unwanted data loss. It is advisable to retain the data and utilize computed properties to address this issue. Below is a demonstration using a Vue component for consolidated data handling:

<template>
  <div id="app">
    <input type="text" v-model="inputTask">
    <button @click="addTask">Add</button>

    <div>
      <button @click="changeFilter('all')">All</button>
      <button @click="changeFilter('ongoing')">Ongoing</button>
      <button @click="changeFilter('done')">Done</button>
    </div>

    <ul>
      <li v-for="(todo, index) in getTasksList()" :key="{index}">
        <input type="checkbox" v-model="todo.done">
        <span :class="{done:todo.done}">{{todo.task}}</span>
        <button @click="deleteTask(index)">Remove</button>
      </li>
    </ul>
    <p v-show="todos.length===0">Nothing to do</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    inputTask: "",
    currentFilter: "ongoing",
    todos: [
      { task: "task01", done: false },
      { task: "task02", done: false },
      { task: "task03", done: true },
      { task: "task04", done: true },
      { task: "task05", done: false }
    ]
  }),
  computed: {
    ongoingTasks: function() {
      return this.todos.filter(function(todo) {
        return todo.done === false;
      });
    },
    doneTasks: function() {
      return this.todos.filter(function(el) {
        return el.done;
      });
    }
  },
  methods: {
    changeFilter(newFilter) {
      this.currentFilter = newFilter;
    },
    addTask: function() {
      const todo = { task: this.inputTask, done: false };
      this.todos.push(todo);
      this.inputTask = "";
    },
    deleteTask: function(index) {
      this.todos.splice(index, 1);
    },
    getTasksList() {
      switch (this.currentFilter) {
        case "ongoing":
          return this.ongoingTasks;
        case "done":
          return this.doneTasks;
        case "all":
        default:
          return this.todos;
      }
    }
  }
};
</script>

I trust this will be beneficial to your situation!

What's the best way to sort objects using VueJS?

Answer №1

Answer №2

Similar questions

The JSON information is not appearing as expected

Unable to use jQuery to delete class from an element

Tips for securely closing express servers to ensure that ports are properly released

Efficiently Extract and Append Unknown Nested JSON Values into an Array using JavaScript

What role does JavaScriptExecutor play within the Selenium framework?

Is it possible to incorporate the arrow function within the debounce function?

When the file is active on a local machine, the bot commands run smoothly. However, these commands do not execute on a remote

How come my Angular JS isn't functioning properly?

Display a message to a user on the same HTML page using jQuery or JavaScript

The function call within the onKeyPress event in ReactJS isn't triggering

How can I apply a class to a list item when clicked using Vue.js and a template component generated by v-for loop?

Using Ngrx to filter data following an action dispatch

Which RxJS operators necessitate unsubscription?

Creating a tool for arranging furniture, seeking guidance on best practices

Using PHP, assign a reference to a class member

Express.js failing to send back a response

The footer is now accompanied by the <v-navigation-drawer> on the side

No content found in the responseText when sending an XMLHttpRequest

I am unable to click on the navigation buttons in my bootstrap template

What is the best way to fill in a property for a mongoose schema?