мои vue данные не меняются, когда я нажимаю на кнопку - PullRequest
Новая
       3

мои vue данные не меняются, когда я нажимаю на кнопку

0 голосов
/ 16 апреля 2020 
      <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 инструментальный плагин, но ничего не изменилось, если я не нажму кнопку refre sh, вот две функции 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'
                        )
                    })

                }
            })

1 Ответ

0 голосов
/ 17 апреля 2020 
<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;
            });
     }
}
В вашей функции 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

...