I am practicing by making a todolist that can be added, deleted, and modified, imitating www.todolist.cn, and got stuck when re-editing the todo content. The official solution has not been summarized, so I am here to ask for help. the following.
Clicking on the text changes to input modification, but the effect is like this
Because my v-if is bound to the same variable, it will definitely be changed globally, but for vue My understanding is too shallow and I can’t think of effective methods.
Code: `
NBtodoList
`
Is there any way to hide only the current span and display the input after the revamp event is triggered? Ask the experts for advice!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This method will show or hide all todos together,
To target only a certain todo, you can add an isRevamp to each todo, and then it becomes:
But this requires that every todo in your data contains isRevamp at the beginning. If you want to add it dynamically, it will be more troublesome. Please see the "Responsive Principle" section in the document: https://cn.vuejs. org/v2/guide...
But there is a simple way to deal with it: add an index variable to the data,
roughly like this:
It’s very simple, just bind a state variable to each element.