CODEWITHSUNDEEP
vuejs2vuex
Andreas Selenwall
Andreas Selenwall

Reputation: 5775

I can't get vuex and v-bind:class to work together

I am trying to make vuex select a CSS-class when a certain state property is true by using v-bind:class="{ selected : $store.getters.selected[status] }".

I can't provide all my code, but can someone please just tell me if it is supposed to be working like this straight out of the box? I know that $store.getters.selected[status] returns true or false, but it doesn't activate the class.

<template>
  <div v-for="(status, index) in stat.status v-bind:class="{ selected : $store.getters.selected.status[status] }" v-on:click="select(status)">
</template>

<script>

export default {
  name: 'vueTest',
  data() {
    return {}
  },
  methods() {
    selected(status, selected) {
      this.$store.dispatch('selectStatus', status, selected);
    }
  },
  computed() {
    stat() {
       return this.$store.getters.stat;
    }
  }
}

</script>

<style>
.selected {
  font-weight: bold;
}
</style>

So basically, it should be possible to do a multi-selection of statuses provided in the stat.status list.

main.js with vuex stuff:

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    selected: {
      status: {},
      label: {}
    },
    stat: [ 'test 1', 'test 2' ]
  },
...
  getters: {
    selected: state => state.selected,
    stat: state => state.stat
  }
})

Upvotes: 1

Views: 887

Answers (1)

whoacowboy
whoacowboy

Reputation: 7447

Some more code would be nice, but I believe you need to add the variable to your computed section of you component.

computed: {
  selected(){
    return $store.getters.selected[this.status];
  }
}

In you template you would call it like

v-bind:class="{ selected : selected }"

Upvotes: 1

Related Questions