vuex와 v-bind:class를 함께 작동할 수 없습니다.

vuex와 v-bind:class를 함께 작동할 수 없습니다.

v-server:class="{selected:$store.getters를 사용하여 특정 상태 속성이 참일 때 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
  }
})

코드가 좀 더 있으면 좋겠지만 변수를 구성 요소의 계산된 섹션에 추가해야 한다고 생각합니다.

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

당신의 템플릿에서 당신은 그것을 다음과 같이 부를 것입니다.

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

언급URL : https://stackoverflow.com/questions/43855698/i-cant-get-vuex-and-v-bindclass-to-work-together