Click to show the current block in the v-for?

How to show only the block description in the header which is clicked? Clicking shows/hides all blocks with the class of the message-body, and need to hide/show only the current.

<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},
]
 },

March 12th 20 at 08:04
1 answer
March 12th 20 at 08:06
Solution
To make the 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 a gel one for sahelienne list
It's a decision I came to mind, but if objects will be very much, why should each object keep isOpen: false? I'm thinking of something different to do. - antone_Upton commented on March 12th 20 at 08:09
@antone_Upton, through a separate component.
Do you have a component parent. It you twist the loop the array, your (relatively so):
<div class="articls">
 <template v-for="(todo, index) in todos">
 <child-component :todo="todo"/>
</template>
</div>

Is the child:
<article class="message">
 <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>
</article>

And the script, respectively, will be for the child
data: {
 visible: false
 },


Wrote a brief in a hurry, I hope the message is clear. If not, tell me, later on the code pins will make an example - karson.Schimmel commented on March 12th 20 at 08:12
@karson.Schimmel, here is an example.
https://jsfiddle.net/L5kjvmc6/

It turns out that if the object (Tasca), originally the property completed: true(false) is not set, the button will not respond, if we simply try this property to add to the object Tasca.

That is, if we assume there are products that have a click "add To cart" we want to change the name of the button to "Added" in the object properties of these products must necessarily be a property of type isAdded: false.

That is, if we use a database from which we draw the objects (goods) that must be this field, which defaults to false everywhere. And to me this seems excessive.

Another option that you have not test is to create an empty array and by clicking on the button push the product id in this array, and-v if test is ID of this item in the array and if it is, then the print button with a different name. - antone_Upton commented on March 12th 20 at 08:15
@antone_Upton, use the option as I described above
then you property will be generated in the component for each task separately - karson.Schimmel commented on March 12th 20 at 08:18

Find more questions by tags Vue.js