Vue( Nuxt.js ) Filter

데모보기

pages/studyfilter/index.vue

<template>

<div class="studyfilter">

<h1>Study Filter</h1>

<button @click="showList">확인</button>

<ul>

<li v-for="( item, index ) in list" :key="index">

{{ index + '. ' + item.txt }}

</li>

</ul>

</div>

</template>

<script>

export default {

data(){

return{

list : []

}

},

methods : {

showList()

{

this.list = this.$store.getters[ "studyfilter/getList" ];

}

}

}

</script>

<style lang="scss" scoped>

.studyfilter{ padding-top: 50px; width: 500px; margin: 0 auto; text-align: center;

h1{ margin-bottom: 50px; }

button{ width: 500px; text-align: center; font-size: 100px; margin-bottom: 50px; padding: 10px 0; }

ul{

li{ margin-bottom: 20px; }

}

}

</style>

store/studyfilter.js

export default{

state(){

return{

list : [

{ txt : "첫번째 리스트", isBoo : true },

{ txt : "두번째 리스트", isBoo : false },

{ txt : "세번째 리스트", isBoo : true },

{ txt : "네번째 리스트", isBoo : false },

{ txt : "다섯번째 리스트", isBoo : true }

]

}

},

getters : {

getList : function( state ){

return state.list.filter( $item => { return $item.isBoo });

}

}

}