[Vuejs]-My vue data is not changing when i click at a button

by

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:

  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

👤Anne

Leave a comment