When using the set function to change the value of a variable that controls a class, I encounter an issue where the variable changes successfully but the class itself does not change.
The Vue file contains the following code:
<template>
<li v-for="item in menu">
<a href="" :class="{ 'show' : item.showNavItems }"
@click="[$set(item, 'showNavItems', !item.showNavItems), toggleNavItems(item)]">{{ item.title }}</a>
</li>
</template>
<script lang="ts">
import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
@Component({})
export default class SideNavigation extends Vue {
@Prop({ default: [] }) menu!: []
toggleNavItems(item: any) {
console.log(item);
}
created() {
console.log(this.menu);
}
}
</script>
The Menu variable is loaded from a twig file as shown below:
<side-navigation v-bind:menu="{{ global_data.getSideMenu|json_encode}}"></side-navigation>
Although I can see that the showNavItems variable changes after every click, the class 'show' does not change. When I moved this code to a fiddle (https://jsfiddle.net/7c3wLvah/), it appeared to be working fine. What could be causing the problem with my real component?