[vue: worklist 제작] 4-2. 완료, 제외, total 클릭시 해당 리스트만 보여짐

Status 컴포넌트에서 상태값버튼 클릭시 emi을 이용하여 App.vue로 보냈다

App.vue에서 상태값을 다시 Group 컴포넌트로 보내고 해당하는 row만 보여준다

 

 

App.vue

<template>
  <div>
      <header>
        <Status @updateList="updateList"/>
        <Tab :tabLists="groupTitles"/>

        공통경로 : <input type="text" v-model="this.commonURL">
      </header>

      <label>
        <input type="checkbox" name="" id="" @change="this.isModify = $event.target.checked;">
        <span v-if="this.isModify">읽기모드</span>
        <span v-else>수정모드</span>
      </label>

      <article class="content">
        <Group v-for="(group, idx) in groups" 
          :iaList="group" 
          :idx="idx" 
          :commonURL="commonURL"
          :sort="this.sort" 
          :isModify="isModify"/>
      </article>
  </div>
</template>

<script>
import Status from './components/Status.vue'
import Group from './components/Group.vue'
import Tab from './components/Tab.vue'

export default {
  name: 'App',
  components: {
    Status,
    Group,
    Tab
  },
  data(){
    return{
      isModify: true,
      iaList : this.$store.state.iaData,
      groupTarget:'1depth',
      groupTitles: [],
      groups : [],
      sort:'total',
      commonURL: '',
    }
  },
  ...
  methods : {
    modifyStatus(e){
      this.isModify = e.target.checked;
    },
    ...
    updateList(status){
      this.sort = status;
    },
  }
}
</script>

 

 

Group.vue

template

<template>
...
  <tr v-for="(iaValList) in iaGroup" 
	...
    v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'">
</template>

v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'"

테이블의 tr이 worklist-status값이 Status.vue에서 클릭한 값과 같거나 total일 경우 보여진다

 

script

<script>
export default {
  name: 'group',
  props:{
    isModify : Boolean,
    iaList : Object,
    idx: Number,
    commonURL:String,
    sort:String,
  }
}
</script>