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

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

Answer 1

<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:
Let's revert above back to your function: <div class="sections_container" v-for="(section, index) in sections" #click="selectedSection">
#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;
});
}
}
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