First Image without clicking on Edit

Second Image when i click on Edit

here when i click on which ever edit button all the task which is in loop plus it is in if part will be hidden and else part will be shown but i want to hide particular task when i click on edit button. can anyone help me with that?.

<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" >
        <section v-for="(tasks,index) in Task" :key="index"  >
            <section  v-if="!isEditing">
                <div  >
                    <div >
                            <p >{{ tasks.Task }}</p>
                    </div>
                </div>
                <div >
                    <div >
                            <p  @click="removeTask(index)"></p>
                            <p  @click="EditTaskI(tasks.Task,index)"></p>
                    </div>
                </div>
            </section>
            <section  v-else>
                <div  >
                    <div >
                        <input type="text"  :value="newTaskTitle" @change="taskContentChange">
                    </div>
                </div>
                <div >
                    <div >
                            <p  @click="TaskUpdated(index)"></p>
                    </div>
                </div>
            </section>
        </section>
    </section>
</template>

CodePudding user response：

Observation : isEditing is a culprit in your code. As isEditing is a global variable containing boolean value. Hence, On edit you are updating the value of isEditing which impact for all the tasks.

Solution : Instead of defining isEditing globally, You can add isEditing in each object of Task array. So that you can just update the value of clicked task not for every task.

Your template code will be :

<section  v-if="!tasks.isEditing">

instead of

<section  v-if="!isEditing">

CodePudding user response：

Instead of boolean use index for isEditing:

Vue.component('child', {
  template: `
    <section v-if="Task.length > 0" >
    <section v-for="(tasks,index) in Task" :key="index"  >
      <section  >
        <div  >
          <div >
            <p >{{ tasks.Task }}</p>
          </div>
        </div>
        <div >
          <div >
            <p  @click="removeTask(index)"></p>
            <p  @click="EditTaskI(tasks.Task,index)"></p>
          </div>
        </div>
      </section>
      <section  v-if="isEditing === index">
        <div  >
          <div >
            <input type="text"  :value="newTaskTitle" @change="taskContentChange">
          </div>
        </div>
        <div >
          <div >
            <p  @click="TaskUpdated(index)"></p>
          </div>
        </div>
      </section>
    </section>
  </section>
  `,
  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)
    }
  }
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <child :task="tasks" @update="updateTasks" @remove="removeTask"></child>
</div>