Here i have a toggled the div but i want to toggle on perticuler div not all

Question

First picture without clicking on edit button

Second picture when i click on edit button

So here i want is when i click on which ever divs edit button at that particular div should get text field with toggle effect and also want to add text which is task name here below code wont work here but i was not able to insert code so i have entered like this . can you check y all the divs are getting changed with input boxes.

<script>
export default {
    data(){
        return{
            newContent: "",
            isEditing : false
        }
    },
    props:{
        Task:{
            type:Array,
            required: true
        },
        taskIndex:{
            type: Number,
            required: true
        }
    },
    methods:{
        removeTask: function(idx){
            this.Index = idx;
            this.$emit('remove',this.Index);
        },
        taskContentChange(e){
            this.newContent = e.target.value;
        },
    }
}
</script>

<style>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
.sectionTask{
    background-color: rgb(0, 0, 0);
    margin-left: 25px;
    width: 200px;
    float: left;
    margin-bottom: 5px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    min-height: 40px;
    color: white;
    text-align: center;
    display: flex;
}
.removeTask{
    color: white;
}
.listTask{
    align-items: center;
    z-index: absolute;
    display: flex;
}
.OptionSectionMain{
    width: 20%;
    right: 0;
}
.TaskSection{
    height:100%;  
    position:relative;
}
.TaskTitleList{
    width: 80%;
}
.OptionSection{
    display: flex;
    flex-direction: column;
}
.OptionSection p{
    margin: 0;
    line-height: 25px;
    cursor: pointer;
}
</style>

<template>
    <section v-if="Task.length > 0" class="taskMainSection">
        <section v-for="(tasks,index) in Task" :key="index" :taskIndex="index" class="sectionTask" >
            
                <div class="TaskTitleList" v-if="!isEditing">
                    <div class="TaskSection">
                            <p class="listTask">{{ tasks.Task }}</p>
                    </div>
                </div>
                <div class="TaskTitleList" v-else>
                    <div class="TaskSection">
                            <input :value="newContent" @change="taskContentChange" type="text" class="input-task"/>
                    </div>
                </div>
                <div class="OptionSectionMain">
                    <div class="OptionSection">
                            <p class="removeTask fa fa-close" @click="removeTask(index)"></p>
                            <p class="editTask fa fa-edit" v-on:click="isEditing = !isEditing"></p>
                    </div>                   
                </div>
           
        </section>
    </section>
</template>

Answer 1

Try to use index instead of boolean for isEditing:

new Vue({
  el: "#demo",
  data(){
    return{
      newContent: "",
      isEditing: null
    }
  },
  props:{
    Task:{
      type:Array,
      default: () => [{Task:1},{Task:2}]
    },
    taskIndex:{
      type: Number,
      default: 1
    }
  },
  methods:{
    removeTask: function(idx){
      this.Index = idx;
      this.$emit('remove', this.Index);
    },
    taskContentChange(e){
      this.newContent = e.target.value;
    },
  }
})

.sectionTask{
  background-color: rgb(0, 0, 0);
  margin-left: 25px;
  width: 200px;
  float: left;
  margin-bottom: 5px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  min-height: 40px;
  color: white;
  text-align: center;
  display: flex;
}
.removeTask{
  color: white;
}
.listTask{
  align-items: center;
  z-index: absolute;
  display: flex;
}
.OptionSectionMain{
  width: 20%;
  right: 0;
}
.TaskSection{
  height:100%;  
  position:relative;
}
.TaskTitleList{
  width: 80%;
}
.OptionSection{
  display: flex;
  flex-direction: column;
}
.OptionSection p{
  margin: 0;
  line-height: 25px;
  cursor: pointer;
}

<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">
  <section v-if="Task.length > 0" class="taskMainSection">
    <section v-for="(tasks, index) in Task" :key="index" class="sectionTask" >
                                          <!-- ? check for index -->
      <div class="TaskTitleList" v-if="isEditing !== index">
        <div class="TaskSection">
          <p class="listTask">{{ tasks.Task }}</p>
        </div>
      </div>
      <div class="TaskTitleList" v-else>
        <div class="TaskSection">
          <input :value="newContent" @change="taskContentChange" type="text" class="input-task"/>
        </div>
      </div>
      <div class="OptionSectionMain">
        <div class="OptionSection">
          <p class="removeTask fa fa-close" @click="removeTask(index)"></p>
                                                  <!-- ? set index -->
          <p class="editTask fa fa-edit" @click="isEditing = index"></p>
        </div>                   
      </div>
    </section>
  </section>
</div>