vuex 및 v-bind를 얻을 수 없습니다. 함께 작동하는 클래스

Question

v -x bind를 사용하여 특정 상태 속성이 참일 때 vuex에서 CSS 클래스를 선택하려고합니다. class = "{selected : $ store .getters.selected [상태]} ".

내 모든 코드를 제공 할 수는 없지만 다른 사람이이 코드를 그대로 사용한다고 가정 해주십시오. $ store.getters.selected [상태]는 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 }"