12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <template lang="html">
- <div id="user-flags">
- <h4
- class="mdi mdi-folder-outline"
- >My folders</h4>
- <ul>
- <li v-if="flags" v-for="flag in flags" :key="flag.id">
- <h5>{{ flag.name }}</h5>
- </li>
- <li ref="create-flag">
- <span class="mdi mdi-folder-plus-outline"/>
- <input
- placeholder="new folder"
- v-model="new_folder_name"
- />
- <span
- class="mdi mdi-plus-box"
- v-if="new_folder_name"
- @click.prevent="onCreateFlag()"
- />
- </li>
- </ul>
- </div>
- </template>
- <script>
- import { mapState, mapActions } from 'vuex'
- export default {
- name: "userFlags",
- data: () => ({
- new_folder_name: ""
- }),
- computed: {
- ...mapState({
- flags: state => state.User.flags
- })
- },
- methods: {
- ...mapActions({
- createFlag: 'User/createFlag'
- }),
- onCreateFlag () {
- console.log("UserFlags onCreateFlag", this.new_folder_name)
- this.createFlag(this.new_folder_name);
- // .then(({ data }) => {
- // console.log("UserFlag new folder", data.status);
- // })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- li{
- // cursor: pointer;
- // h5{
- // }
- input{
- border: none
- }
- span.mdi-plus-box{
- cursor: pointer;
- }
- }
- </style>
|