CODEWITHSUNDEEP
laravelvue.jsvuejs2vue-component
Muhammad Essam
Muhammad Essam

Reputation: 57

my vue data is not changing when i click at a button

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

The Data is abtained right and here is my data and my computed property

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

Now When i Click the button the Seletcted_section_id should be changed but nothing happens i check the vue dev tool plugin but nothing changed unless i press the refresh button here is the two functions updateSection and deleteSection for updating and deleting the data does those functions can affect the data is not changing

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'
                        )
                    })

                }
            })

Upvotes: 0

Views: 176

Answers (1)

Anne
Anne

Reputation: 601

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

I assume that the reason why you are directly assigning the selected_section_id to section.id is to debug and check it straightforward. Though not sure if the section will be captured on the @click event, you can try @click="console.log(section, section.id)" if it returns anything.

Otherwise, let's try this process of elimination:

  1. Let's revert above back to your function: <div class="sections_container" v-for="(section, index) in sections" @click="selectedSection">
  2. @click is an event that needs user interactions, I could recommended to use it under methods, so instead of using computed, move the function under methods:
methods: { 
     selectedSection: () => {
            return this.sections.filter((section) => {
                console.log('selec')
                return this.selected_section_id == section.id;
            });
     }
}
  1. On your function selectedSection, this line return this.selected_section_id == section.id doesn't assign the section.id because you are using here the comparison operator == thus it doesn't do anything, instead use the regular assign operator:
return this.selected_section_id = section.id

If the above fix doesn't work, you can try going skeletal starting with the function itself, by console.log everything and check if it correctly returns anything, like in this order:

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;
     });
}

Oh, also, you could try assigning a key to your v-for directive: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State

Upvotes: 1

Related Questions