<template>
<setting>
 <span class = "site"
  v-for="item in setting"
  v-bind:key="item.name" :class="[item.seen ? item.code: 'unSelected']"
  v-on:click="toggle(item.code)">
  {{item.name}}
 </span>
</setting>
</template>

<script>
export default {
  el: 'setting',
  data () {
    return {
      setting: [
        {name: 'SW융합', seen: true, code: 'sw', official: '소프트웨어 융합대학 공지사항'},
        {name: '경희대', seen: true, code: 'khu', official: '경희대학교 공지사항'},
        {name: '장학센터', seen: true, code: 'janghak', official: '경희대학교 장학센터'}
      ]
    }
  },
  methods: {
    toggle (siteClass) {
      this.setting.some(function (data) {
        if (data.code === siteClass) {
          data.seen = !data.seen
        }
      })
      this.$emit('settingchanged', this.setting)
    }
  }
}
</script>

<style>
setting{
  margin-bottom:10px;
}
.site{
  cursor: pointer;
  user-select: none;
}
.unSelected{
  color:black;
}
</style>