当我点击一个按钮时，我的 vue 数据没有改变

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: []
        }

现在，当我单击按钮时，应更改 Selected_section_id 但没有任何反应可以影响数据不变化

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)"。

否则，我们试试这个消除过程：

1. 让我们回到上面的函数：<div class="sections_container" v-for="(section, index) in sections" @click="selectedSection">
2. @click 是一个需要用户交互的事件，我建议在methods 下使用它，所以不要使用computed，而是将函数移到methods 下：

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

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

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