Première photo, pas besoin de cliquer sur "Modifier"
Deuxième photo en cliquant sur "Modifier"
Ici, lorsque je clique sur quel bouton d'édition, toutes les tâches de la boucle ainsi que la section dans laquelle elle se trouve seront masquées, sinon la section sera affichée, mais je souhaite masquer la tâche spécifique lorsque je clique sur le bouton d'édition. Quelqu'un peut-il m'aider?
<script>
export default {
data(){
return{
newTaskTitle: "",
isEditing : false
}
},
props:{
Task:{
type:Array,
required: true
},
},
methods:{
removeTask: function(idx){
this.Index = idx;
this.$emit('remove',this.Index);
},
EditTaskI(tsk){
this.task = tsk;
console.log(this.task);
this.isEditing = this.isEditing == true ? false : true;
this.newTaskTitle = this.task;
},
TaskUpdated(indx){
this.Index = indx
this.$emit('update',this.Index,this.newTaskTitle);
this.isEditing = this.isEditing == true ? false : true;
},
taskContentChange(e){
this.newTaskTitle = e.target.value;
}
}
}
</script>
<template>
<section v-if="Task.length > 0" class="taskMainSection">
<section v-for="(tasks,index) in Task" :key="index" class="sectionTask" >
<section class="TaskBox" v-if="!isEditing">
<div class="TaskTitleList" >
<div class="TaskSection">
<p class="listTask">{{ tasks.Task }}</p>
</div>
</div>
<div class="OptionSectionMain">
<div class="OptionSection">
<p class="removeTask fa fa-close" @click="removeTask(index)"></p>
<p class="editTask fa fa-edit" @click="EditTaskI(tasks.Task,index)"></p>
</div>
</div>
</section>
<section class="TaskBoxEdit" v-else>
<div class="TaskTitleList" >
<div class="TaskSection">
<input type="text" class="form-control" :value="newTaskTitle" @change="taskContentChange">
</div>
</div>
<div class="OptionSectionMain">
<div class="OptionSection">
<p class="removeTask fa fa-check" @click="TaskUpdated(index)"></p>
</div>
</div>
</section>
</section>
</section>
</template>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Observation :
isEditing是代码中的罪魁祸首。因为isEditing是一个包含booleanVariable globale pour la valeur. Ainsi, lors de l'édition, vous mettez à jour la valeur de isEditing, ce qui affecte toutes les tâches.Solution : Vous pouvez ajouter isEditing dans chaque objet du tableau Task au lieu de définir isEditing globalement. De cette façon, vous pouvez simplement mettre à jour la valeur de la tâche cliquée au lieu de mettre à jour pour chaque tâche.
Le code de votre modèle sera :
au lieu de
Utilisez des index au lieu de booléens pour faire
isEditing:Vue.component('child', { template: `
`,
data(){
return{
newTaskTitle: "",
isEditing : null
}
},
props:{
Task:{
type:Array,
required: true
},
},
methods:{
removeTask(idx){
console.log(idx)
this.$emit('remove', idx);
},
EditTaskI(tsk, i){
this.task = tsk;
this.isEditing = i;
this.newTaskTitle = this.task;
},
TaskUpdated(indx){
this.Index = indx
this.$emit('update',this.Index,this.newTaskTitle);
this.isEditing = null;
},
taskContentChange(e){
this.newTaskTitle = e.target.value;
}
}
})
new Vue({
el: "#demo",
data(){
return{
tasks: [{Task: 'aaa'}, {Task: 'bbb'}, {Task: 'ccc'}],
}
},
methods: {
updateTasks(i, name) {
this.tasks[i].Task = name
},
removeTask(i) {
this.tasks.splice(i, 1)
}
}
}){{ tasks.Task }}