On click show current block in v-for?

Question

Vue.js

How to show only the description block whose title was clicked? When clicked, all blocks with the message-body class are shown/hidden, but only the current one needs to be hidden/showed.

<article class="message" v-for="todo in todos">

  <div class="message-header">
    <p @click="visible = !visible">{{ todo.title }}</p>
    <button class="delete" aria-label="delete" @click="removeToDo(todo)"></button>
  </div>
  
  <div class="message-body" v-if="visible">
  {{ todo.description }}
  </div>

data: {
        visible: false,
        todoTitle: '',
        todoDesc: '',
        todos: [
        {title: "Do something", description: "To do something", completed: false, id: 0},
        {title: "Do something 2", description: "To do something 2", completed: false, id: 1},
        {title: "Do something 3", description: "To do something 3", completed: false, id: 2},
        ]
    },

Answer 1

Make data like this:

data: {
        todoTitle: '',
        todoDesc: '',
        todos: [
        {isOpen:false, title: "Do something", description: "To do something", completed: false, id: 0},
        {isOpen:false, title: "Do something 2", description: "To do something 2", completed: false, id: 1},
        {isOpen:false, title: "Do something 3", description: "To do something 3", completed: false, id: 2},
        ]
    },

And in the template so v-if="todo.isOpen" and so on.
The bottom line is that you have one vizibl for all list items