我无法让 vuex 和 v-bind:class 一起工作

Question

我试图通过使用 v-bind:class="{ selected : $store.getters.selected[status] }" 使 vuex 在某个状态属性为真时选择一个 CSS 类。

我无法提供我的所有代码，但有人可以告诉我它是否应该像这样直接开箱即用？我知道 $store.getters.selected[status] 返回 true 或 false，但它不会激活类。

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

所以基本上，应该可以对 stat.status 列表中提供的状态进行多选。

带有 vuex 东西的 main.js：

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

Answer 1

更多代码会很好，但我相信您需要将变量添加到组件的计算部分。

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

在你的模板中你可以这样称呼它

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