checkbox - Vuejs + Vuex 获取复选框状态(选中)

Question

我想从商店获取复选框状态。我与复选框列表和“事件复选框”列表 ( inArray(checkList.value, activeFilters) ) 进行了比较，但我无法从 this.$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>

Answer 1

我会这样编码:

• 添加一个 :checked 绑定(bind)，将当前选择的过滤器应用到您当前 activeFilters Vuex 状态的下拉列表
• 使用当前的 activeFilter 值在复选框更改时切换 Vuex 存储中的状态 - 无需从事件中检查当前的复选框状态。直接从组件改变存储是可以的，因为没有异步过程。
• 为管理 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>