Vue: How to dynamically update a list with a button click?

Question

I am currently studying the Vue framework with this tutorial. The current episode is about Computed Properties. I have two lists of tasks, one with all of them and one with only those that are incomplete. With a button click the second list should be updated so it only shows tasks that are completed instead. I also want the message "Incomplete tasks" to change to "Completed tasks!. But how do I do all this without hassle?

The clue I received in the tutorial was this console command: app.tasks[0].completed = false;

HTML

<div id="computedList">

    <h2>All Tasks</h2>

    <ul>    
        <li v-for="task in tasks" v-text="task.description"></li>

    </ul>

    <h2>{{ message }}</h2>

    <ul>
        <li v-for="task in incompleteTasks" v-text="task.description"></li>
    </ul>

    <button @click="toggleClass">Complete Class</button>

    <br>

</div>

JavaScript

var appb = new Vue({

    el: '#computedList',

    data: {
        message: 'Incomplete tasks',
        tasks: [
            {description: 'Begin to study Vue', completed: true},
            {description: 'Begin with the testapp', completed: true},
            {description: 'Begin to study the ABB webbapp', completed: false},
            {description: 'Begin to study Angular2', completed: false},
        ]
    },

    computed: {

        incompleteTasks() {

            return this.tasks.filter(task => !task.completed); //Filtrerar ovanstående lista!

        }
        },

    methods: {
        toggleClass() {
            return this.tasks.filter(task => task.completed);
        }
        },
});

I want the solution to contain as little code as possible. Thanks!

Roy J · Accepted Answer · 2018-01-14 13:56:22Z

2

The main bit of changeable program state you describe is whether you're showing completed or incomplete tasks. You should have a data item for that.

showingCompleted: false

Your message can be computed from that (rather than being a data item), so in your computed section, you would have something like

message() {
  return this.showingCompleted ? 'Completed tasks' : 'Incomplete tasks';
}

The toggleClass method doesn't do what its name indicates. It should toggle showingCompleted:

this.showingCompleted = !this.showingCompleted;

Finally, your computed list of incomplete tasks should be based on showingCompleted, so that it can be either incomplete or completed tasks:

filteredTasks() {
  return this.tasks.filter(task => task.completed === this.showingCompleted);
}

answered Jan 14, 2018 at 13:56

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

Collectives™ on Stack Overflow

Vue: How to dynamically update a list with a button click?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related