Question

      <div class="sections_container" v-for="(section, index) in sections" @click="selected_section_id = section.id">
                <div class="section">
                    <input class="section_name" type="text" name="name" v-model="section.name" @keyup.enter="updateSection(section)">
                </div>
                <div class="actions">
                    <div style="margin-right: 10px;">
                        <button class="btn btn-primary" @click="updateSection(section)"type="submit"> <i class="fa fa-edit"></i></button>
                    </div>
                    <div>
                        <button @click="deleteSection(index)" class="btn btn-danger" type="submit"><iclass="fa fa-trash"></i></button>
                    </div>
                </div>
            </div>

数据正确无误，这是我的数据和计算所得的属性

computed: {
        selectedSection: () => {
            return this.sections.filter((section) => {
                console.log('selec')
                return this.selected_section_id == section.id;
            });
        }
    },
    mounted() {
        window.axios.get(route('allSections')).then((res) => {
            this.sections = res.data;
        });
    },
    data: function () {
        return {
            selected_section_id: 1,
            new_section_name: '',
            sections: [],
            groups: [],
            questions: []
        }

现在，当我单击按钮时，应该更改Seletcted_section_id，但没有任何反应，我检查了vue dev工具插件，但没有任何改变，除非我按下刷新按钮，这是两个用于更新和删除数据的函数updateSection和deleteSection会执行那些功能会影响数据不变

updateSection(section) {
            window.axios.patch(route("section.update", section.id), {name: section.name}).then((res) => {
                this.sections = res.data;
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    onOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                })

                Toast.fire({
                    icon: 'success',
                    title: 'Updated Successfully'
                })
            });
        },

           deleteSection(index) {
            Swal.fire({
                title: 'Are you sure',
                text: "You won't be able to revert this",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it'
            }).then((result) => {
                if (result.value) {
                    window.axios.delete(route('section.destroy', this.sections[index])).then(() => {
                        this.sections.splice(index, 1);
                        Swal.fire(
                            'Deleted',
                            'Your file has been deleted.',
                            'success'
                        )
                    })

                }
            })

Answer 1

<div class="sections_container" v-for="(section, index) in sections" @click="selected_section_id = section.id">

我认为您直接将selected_section_id分配给section.id的原因是调试并直接对其进行检查。尽管不确定section是否会在@click事件中捕获，但是您可以尝试@click="console.log(section, section.id)"返回任何内容。

否则，让我们尝试以下消除过程：

让我们回到上面的功能：<div class="sections_container" v-for="(section, index) in sections" @click="selectedSection">
@click是需要用户交互的事件，我建议在methods下使用它，因此不要使用computed，而应将功能移到methods下：< / li>

methods: { 
     selectedSection: () => {
            return this.sections.filter((section) => {
                console.log('selec')
                return this.selected_section_id == section.id;
            });
     }
}

在函数selectedSection上，该行return this.selected_section_id == section.id没有分配section.id，因为您在此处使用比较运算符==，因此它什么也不做，而是使用常规的assign运算符：

return this.selected_section_id = section.id

如果上面的修复方法不起作用，您可以尝试以console.log的形式从函数本身开始进行骨架化，并检查其是否正确返回了任何内容，如下所示：

selectedSection: () => {
    console.log(this.sections)
}

selectedSection: () => {
     return this.sections.filter((section) => {
          console.log('check the values of section: ', section, section.id);
          return this.selected_section_id = section.id;
     });
}

哦，同样，您可以尝试将key分配给v-for指令：https://vuejs.org/v2/guide/list.html#Maintaining-State

单击按钮时，我的Vue数据没有更改

1 个答案: