Je m'entraîne en créant une liste de tâches faite maison qui peut être ajoutée, supprimée et modifiée, en imitant www.todolist.cn, et je suis resté bloqué lors de la réédition du contenu de la tâche. Il n'y a pas de solution officielle, donc je suis. demander de l'aide ici. ce qui suit.
Cliquez sur le texte pour le changer en modification d'entrée, mais l'effet est comme ceci
Parce que mon v-if est lié à la même variable, il sera certainement modifié globalement, mais ma compréhension de vue est trop superficielle pour pensez à un moyen efficace.
Code : `
NBtodoList
Vue.component('my-li',{ props:['to','okto','childchecked','childisrevamp'], template: '{{to}}{{okto}}
', methods: { childAddTodo: function(){ this.$emit('childAddTodo') }, deltodo: function(){ this.$emit('deltodo'); }, todook: function(){ this.$emit('todook'); }, childrevamp: function(){ this.$emit('childrevamp'); } } }) Vue.component('my-h2',{ props: ['num','status'], template: '{{status}}{{num}}
' }) new Vue({ el: '#app', data: { todoText: '', todoList: [], okTodoText: '', oktodoList: [], noNum: 0, okNum: 0, checked: true, isRevamp: true }, methods: { addTodo: function(){ this.todoText.trim() ? this.todoList.push((this.todoText).trim()) : alert('你输嘞不对~'); localStorage.notodo = JSON.stringify(this.todoList); this.noNum = this.todoList.length; this.todoText = ''; }, deltodos: function(index){ this.todoList.splice(index,1); localStorage.notodo = JSON.stringify(this.todoList); this.noNum = this.todoList.length; }, deloktodos: function(index){ this.oktodoList.splice(index,1); localStorage.oktodo = JSON.stringify(this.oktodoList); this.okNum = this.oktodoList.length; }, dotoDown: function(index){ this.oktodoList.push(this.todoList[index]); localStorage.oktodo = JSON.stringify(this.oktodoList); this.deltodos(index); this.okNum = this.oktodoList.length; }, dotoUp: function(index){ this.todoList.push(this.oktodoList[index]); localStorage.notodo = JSON.stringify(this.todoList); this.deloktodos(index); localStorage.oktodo = JSON.stringify(this.oktodoList); this.noNum = this.todoList.length; }, revamp: function(){ this.isRevamp = !this.isRevamp; } }, created:function(){ this.todoList = localStorage.notodo ? JSON.parse(localStorage.notodo) : []; this.oktodoList = localStorage.oktodo ? JSON.parse(localStorage.oktodo) : []; this.noNum = this.todoList.length; this.okNum = this.oktodoList.length; } })
`
Existe-t-il un moyen de masquer uniquement l'étendue actuelle et d'afficher l'entrée après avoir déclenché l'événement de refonte ? Demandez conseil aux experts !
Cette méthode affichera ou masquera toutes les tâches ensemble,
Pour cibler uniquement une certaine tâche, vous pouvez ajouter un isRevamp pour chaque tâche, et cela devient alors :
Mais cela nécessite que chaque tâche dans vos données contienne isRevamp au début. Si vous souhaitez l'ajouter dynamiquement, cela sera plus gênant. Veuillez consulter la section « Principe réactif » dans le document : https://cn.vuejs. org/v2/guide...
Mais il existe un moyen simple de résoudre ce problème : ajoutez une variable d'index aux données,
à peu près comme ceci :
C'est très simple, il suffit de lier une variable d'état à chaque élément.