materio-d8/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

<template lang="html">
  <div id="user-flags">
    <h4
      class="mdi mdi-folder-outline"
    >My folders</h4>
    <ul>
      <li v-for="flag in flags" :key="flag.id">
        <h5>{{ flag.name }}</h5>
      </li>
      <li ref="create-flag">
        <h5
          class="mdi mdi-folder-plus-outline"
          @click.prevent="onCreateFlag()"
        >new folder</h5>
      </li>
    </ul>
  </div>
</template>

<script>

import { mapState, mapActions } from 'vuex'

export default {
  name: "userFlags",
  data: () => ({

  }),
  computed: {
    ...mapState({
      flags: state => state.User.flags
    })
  },
  methods: {
    ...mapActions({
      createFlag: 'User/createFlag'
    }),
    onLogout () {
      console.log("UserFlags onCreateFlag")
      this.userLogout()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>