UserFlags.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template lang="html">
  2. <div id="user-flags">
  3. <h4
  4. class="mdi mdi-folder-outline"
  5. >My folders</h4>
  6. <ul>
  7. <li v-if="flags" v-for="flag in flags" :key="flag.id">
  8. <h5>{{ flag.name }}</h5>
  9. </li>
  10. <li ref="create-flag">
  11. <span class="mdi mdi-folder-plus-outline"/>
  12. <input
  13. placeholder="new folder"
  14. v-model="new_folder_name"
  15. />
  16. <span
  17. class="mdi mdi-plus-box"
  18. v-if="new_folder_name"
  19. @click.prevent="onCreateFlag()"
  20. />
  21. </li>
  22. </ul>
  23. </div>
  24. </template>
  25. <script>
  26. import { mapState, mapActions } from 'vuex'
  27. export default {
  28. name: "userFlags",
  29. data: () => ({
  30. new_folder_name: ""
  31. }),
  32. computed: {
  33. ...mapState({
  34. flags: state => state.User.flags
  35. })
  36. },
  37. methods: {
  38. ...mapActions({
  39. createFlag: 'User/createFlag'
  40. }),
  41. onCreateFlag () {
  42. console.log("UserFlags onCreateFlag", this.new_folder_name)
  43. this.createFlag(this.new_folder_name);
  44. // .then(({ data }) => {
  45. // console.log("UserFlag new folder", data.status);
  46. // })
  47. }
  48. }
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. li{
  53. // cursor: pointer;
  54. // h5{
  55. // }
  56. input{
  57. border: none
  58. }
  59. span.mdi-plus-box{
  60. cursor: pointer;
  61. }
  62. }
  63. </style>