搜索

首页  >  问答  >  正文

使用循环在Vue.js中显示所有元素,我想隐藏其中一个元素,但所有元素都被隐藏了

第一张图片,无需单击“编辑”

单击“编辑”时的第二张图片

在这里,当我单击哪个编辑按钮时,循环中的所有任务加上它所在的部分将被隐藏,否则部分将显示,但我想在单击编辑按钮时隐藏特定任务。谁能帮我吗?

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

P粉613735289P粉613735289277 天前419

全部回复(2)我来回复

  • P粉814160988

    P粉8141609882024-02-27 12:07:27

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

    解决方案:您可以在 Task 数组的每个对象中添加 isEditing,而不是全局定义 isEditing。这样您就可以只更新单击任务的值,而不是为每个任务更新。

    您的模板代码将是

    而不是

    回复
    0
  • P粉850680329

    P粉8506803292024-02-27 11:46:25

    使用索引代替布尔值来进行 isEditing

    Vue.component('child', {
      template: `
        

    {{ tasks.Task }}

    `, 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) } } })
    
    sssccc
    

    回复
    0
  • 取消回复