yaminncco / vue-sidebar-menu

A Vue.js Sidebar Menu Component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problem of reduce items

Archie1978 opened this issue · comments

Hello,
I did the following actions without reloading the page and I have the item where I clicked which has disappeared.
I take a example without out target.

image

Can you provide a minimal reproduction?

Yes,
package.json

 

 "dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^3.0.0-5",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-sidebar-menu": "^5.2.1",
    "vuetify": "^2.6.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },

MenuSidebar.vue

    <sidebar-menu :menu="menu" />
</template>

<style scoped>

</style>

<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css' 

export default {
  name:'MenuSidebar',
  components: {
    SidebarMenu
  },
    data() {
        return {
            menu: [
                {
                    header: "Main Navigation",
                    title: 'Main Navigation',
                },
                {
                    href: '/#test',
                    title: 'Dashboard',
                    icon: 'fa fa-user'
                },
                {
                    href: '/#chart',
                    title: 'Charts',
                    icon: 'fa fa-chart-area'
                }
            ]
        }
    }
}
</script>

Cant reproduce the issue, can you show me using inspect element on the hidden title?

When I reduce, I had a error java:

Uncaught (in promise) DOMException: Node.insertBefore: Child to insert before is not a child of this node runtime-dom.esm-bundler.js:10

And When I click the item, I had :
Uncaught (in promise) DOMException: Node.insertBefore: Child to insert before is not a child of this node runtime-dom.esm-bundler.js:10

Then I click to expend ( I had class vsm--title_hidden on element ) and I had this error:

Uncaught (in promise) TypeError: el is null
patchClass runtime-dom.esm-bundler.js:104
patchProp runtime-dom.esm-bundler.js:390
patchElement runtime-core.esm-bundler.js:4737
processElement runtime-core.esm-bundler.js:4569
patch runtime-core.esm-bundler.js:4486
patchKeyedChildren runtime-core.esm-bundler.js:5278
patchChildren runtime-core.esm-bundler.js:5205
processFragment runtime-core.esm-bundler.js:4886
patch runtime-core.esm-bundler.js:4482

I'm wondering if it's "router-link" which is not well implemented .

It's from the moment I added "@fortawesome/vue-fontawesome" that causes the error.

How did you put the awesome innto project ?

I had see #96 :)