vue、vuexの質問です。
同じデータを2回、表示用データと検索用データとして入力しています。(store.jsのitemsとITEMS)
同じデータを2回入力せずに、1回の入力、1つのデータ(store.jsのitemsのみ)で
- 検索窓に入力された時は、入力文字が含まれている全てのデータを返す
- 検索窓が空の時は、全てのデータを返す
を実現するにはどうすればいいでしょうか?
環境
- vue-cli
- webpack
- "pug": "^2.0.0-rc.4",
- "pug-loader": "^2.3.0",
- "vue": "^2.4.4",
- "vuex": "^3.0.1"
構成
- src - assets - components - ItemCheckbox.vue - vuex - actions.js - getters.js - mutation_types.js - mutations.js - store.js - App.vue - main.js
##実装
mutations.js
lang
1import * as types from './mutation_types' 2 3export default { 4 [types.FILTER_ITEMS](state, data){ 5 /*state.items= state.items.fiter~ だと連続で検索できない*/ 6 state.items = state.ITEMS.filter(function(item){ 7 return item.name.indexOf(data.name) > -1 8 },this) 9 } 10}
store.js
lang
1import Vue from 'vue' 2import Vuex from 'vuex' 3import getters from './getters' 4import actions from './actions' 5import mutations from './mutations' 6 7Vue.use(Vuex) 8 9const state = { 10/* ここのデータをitemsのみにしたい*/ 11 items: [{"id":1,"name":"item1"}, 12 {"id":2,"name":"sample"}, 13 {"id":3,"name":"texttext"}], 14 ITEMS: [{"id":1,"name":"item1"}, 15 {"id":2,"name":"sample"}, 16 {"id":3,"name":"texttext"}] 17} 18 19export default new Vuex.Store({ 20 state, mutations, getters, actions 21})
ItemCheckbox.vue
lang
1<template lang="pug"> 2.form 3 input(type="search", @input="onInput({ name: $event.target.value })") 4 .form-checkbox(v-for="item in items", :key="item.id") 5 label 6 input(type="checkbox", :value="item.id", name="group[item_ids][]") 7 span.custom-control-description {{item.name}} 8</template> 9<script> 10 import { mapActions } from 'vuex' 11 export default{ 12 props: ['items', 'name'], 13 methods: mapActions({ 14 onInput: 'filterItems' 15 }) 16 } 17</script>
回答1件
あなたの回答
tips
プレビュー