Question

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

我无法提供我的所有代码，但有人可以告诉我它是否应该直接开箱即用？我知道$ 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列表中提供多种状态选择。

main.js与vuex的东西：

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

我无法让vuex和v-bind：类一起工作

1 个答案: