在 vue js 中，在循环的帮助下，我显示了所有元素，我想从中隐藏一个元素，但所有元素都被隐藏了

Question

First Image without clicking on Edit

Second Image when i click on Edit

在这里，当我单击哪个编辑按钮时，所有循环中的任务都在其中，如果部分将被隐藏，否则部分将显示，但我想在单击编辑按钮时隐藏特定任务。有人可以帮我吗？

<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>

Answer 1

isEditing:

而不是布尔值使用索引

Vue.component('child', {
  template: `
    <section v-if="Task.length > 0" class="taskMainSection">
    <section v-for="(tasks,index) in Task" :key="index" class="sectionTask" >
      <section class="TaskBox" >
        <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-if="isEditing === index">
        <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>
  `,
  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>

Answer 2

观察： isEditing 是您代码中的罪魁祸首。因为 isEditing 是一个包含 boolean 值的全局变量。因此，在编辑时，您正在更新影响所有任务的 isEditing 的值。

解决方案： 除了全局定义 isEditing 之外，您可以在 Task 数组的每个对象中添加 isEditing。这样您就可以更新点击任务的值，而不是为每个任务更新。

您的模板代码将是 :

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

而不是

<section class="TaskBox" v-if="!isEditing">

在 vue js 中，在循环的帮助下，我显示了所有元素，我想从中隐藏一个元素，但所有元素都被隐藏了

In vue js with the help of loop i am showing all elements and i want to hide one element from that but all elements are getting hide

javascript

html

vue.js

loops

if-statement