Vuejs + Vuex Get 확인란 상태(체크됨)

Vuejs + Vuex Get 확인란 상태(체크됨)

나는 상점에서 체크박스 상태를 받고 싶다.확인란 목록과 "active checkbox" 목록(inArray(checkList.value, activeFilters))을 비교했는데, 여기서 값을 가져올 수 없어.$store.getters.updateFilters.코드:

 <template>
    <li class="dropdown-child">
        <label >
            <input
                type="checkbox"
                :name="checkList.id"
                :value="checkList.name"
                :checked="inArray(checkList.value, activeFilters)"
                @change="updateFilter"
                >
            <span>{{ checkList.name }}</span>

        </label>
    </li>
</template>


<script>

    export default {
        props: ['checkList'],
        computed: {

            inArray (filterValue, filterChecked) {
                const intComparison = /^[+-]?\d+$/.test(filterValue)
                for (let i = 0, l = filterChecked.length; i < l; i++) {
                    if ((intComparison && parseInt(filterChecked[i], 10) === parseInt(filterValue, 10)) || (filterChecked[i] === filterValue)) {
                        return true
                    }
                }
                return false
            },

            activeFilters(){
                return this.$store.getters.updateFilters;
            }
        },
        methods: {

            updateFilter (evt) {
                const elm = evt.target || evt.srcElement
                const action = elm.checked === false
                    ? this.removeFilter(elm) //elm.checked
                    : this.addFilter(elm)
                const value = /^[+-]?\d+$/.test(elm.value)
                    ? parseInt(elm.value)
                    : elm.value
            },

            addFilter(elm){
                this.$store.dispatch('addFilter', elm);
            },

            removeFilter(elm){
                this.$store.dispatch('removeFilter', elm);
            }

        }
    }
</script>

나는 이것을 다음과 같이 부호화할 것이다.

• 추가 a:checked현재 선택한 필터를 현재 드롭다운에 적용하는 바인딩activeFilters브룩스 주
• 전류 사용activeFilter확인란 변경 시 Vuex 저장소의 상태를 전환하기 위한 값 - 이벤트에서 현재 확인란 상태를 확인할 필요가 없음비동기 프로세스가 없기 때문에 구성 요소에서 스토어를 변경하는 Derclty는 괜찮다.
• Vuex 업데이트를 관리하는 filterMenu의 구성 요소 생성
• 필터 항목 렌더링을 위한 하위 구성 요소 생성

아래 데모나 이 jsfiddle을 보십시오.

참고: 데모에서의 필터링은 완벽하지 않다. 단지 재생할 수 있는 일부 필터를 가지고 있기 때문이다.

const filterItem = {
	props: ['item', 'changed'],
  computed: {
  	...Vuex.mapGetters(['activeFilters'])
  },
  template: `
  <li class="dropdown-child">
        <label >
            <input
                type="checkbox"
                :name="item.id"
                :value="item.name"
                :checked="isActive()"
                @change="emitChange"
                >
            <span>{{ item.name }}</span>

        </label>
    </li>
  `,
  methods: {
    isActive() {
    	return this.activeFilters.indexOf(this.item.name) != -1;
    },
  	emitChange() {
    	this.$emit('changed', {
      	item: this.item,
        checkState: !this.isActive() // toggle current checkState
      });
    }
  }
};

const filterMenu = {
  template: `
  	<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <filter-item v-for="checkItem in filterOptions" :item="checkItem" @changed="changedFilter"
      :key="checkItem.id"></filter-item>
    </ul>
    </div>
  `,
  methods: {
    changedFilter(option) {
      this.$store.commit('updateFilters', option);
    }
  },
  data() {
    return {
      filterOptions: [{
        id: 0,
        name: 'all',
        checked: false
      }, {
        id: 1,
        name: 'numeric',
        checked: false
      }, {
        id: 2,
        name: 'letters',
        checked: false
      }]
    };
  },
  components: {
    filterItem: filterItem
  }
};


Vue.use(Vuex);

const store = new Vuex.Store({
  getters: {
    activeFilters: function(state) {
      return state.activeFilters;
    }
  },
  mutations: {
    updateFilters(state, filter) {
      console.log(filter);
      // filter.checkState = true --> check if in activeFilters list
      // filter.checkState = false --> remove filter from activeFilters
      let index = state.activeFilters.indexOf(filter.item.name);
      
      if ((index == -1) &&
      	filter.checkState) {
      	// item not in list && checked --> add to list
        state.activeFilters.push(filter.item.name);
      }
      else {
      	// item in list & toggled to false
        state.activeFilters.splice(index, 1); // remove from list
      }
    }
  },
  state: {
    activeFilters: ['all']
  }
});

new Vue({
  el: '#app',
  store: store,
  computed: {
  	...Vuex.mapGetters(['activeFilters'])
  },
  data: function() {
    return {
      list: [{
        id: 0,
        title: 'First Item'
      }, {
        id: 1,
        title: 'Second Item'
      }, {
        id: 2,
        title: 'Third Item'
      },  {
        id: 3,
        title: '1'
      },
       {
        id: 4,
        title: '2'
      },
       {
        id: 5,
        title: '3'
      },
       {
        id: 6,
        title: 'Test 1'
      },
      {
        id: 7,
        title: 'Test 2'
      }
      ]
    };
  },
  components: {
    filterMenu: filterMenu
  },
  methods: {
  	applyFilter(orgList) {
    	// activeFilters = all, numeric, letters
      let filtered = orgList;
      if (this.activeFilters.indexOf('all') == -1) {
      	// all not included
        let numericFiltered = [];
        let letterFiltered = [];
        
      	if (this.activeFilters.indexOf('numeric') > -1) {
        	numericFiltered = orgList.filter((item) => {
          	console.log('check match', item.title.match(/^\d+$/), item);
          	return /^[\d+\s+]+$/.test(item.title);
          });
        }
        
        if (this.activeFilters.indexOf('letters') > -1) {
        	letterFiltered = orgList.filter((item) => {
          	return /^[a-zA-Z\s+]+$/.test(item.title);
          });
        }
        filtered = numericFiltered.concat(letterFiltered);
      }
      
      console.log('new filter', filtered);
      return filtered;
    }
  }
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">

  <filter-menu></filter-menu>
  selected filters: {{$store.getters.activeFilters}}
  <h1>
    List to filter:
    </h1>
  <ul>
    <li v-for="listItem in applyFilter(list)" :key="listItem.id"> {{listItem.title}}</li>
  </ul>
</div>

참조URL: https://stackoverflow.com/questions/44800581/vuejs-vuex-get-checkbox-status-checked